Javascript jQuery 简单的可折叠 Div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8495257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Simple Collapsible Div?
提问by Aaron Brewer
I am looking for the proper, simple, small code to do the following things:
我正在寻找合适的、简单的、小的代码来做以下事情：
Click on Element with Class Applied to it.
DIV.CLASS - Which expands and shows hidden content. (slideDown - Toggle)
DIV.CLASS - Which collapses and hides the previously show content. (slideUp - Toggle)
单击应用了类的元素。
DIV.CLASS - 扩展并显示隐藏的内容。(slideDown - 切换)
DIV.CLASS - 折叠并隐藏先前显示的内容。(slideUp - 切换)
I have created a jsFiddle here: http://jsfiddle.net/Q4PUw/1/
我在这里创建了一个 jsFiddle：http: //jsfiddle.net/Q4PUw/1/
So to be vague and easy, I need to know how to get a DIV CLASS to become hidden and visible once an element on the same page has a CLASS applied to it, in which would activate and deactivate the HIDDEN and or VISIBLE HTML Content. And I need it to be hidden by default.
因此，为了模糊和简单，我需要知道如何让 DIV CLASS 在同一页面上的元素应用了 CLASS 后变得隐藏和可见，其中将激活和停用 HIDDEN 和/或 VISIBLE HTML 内容。我需要默认隐藏它。
I have looked all over the internet and have only found very complex scripts, but nothing simple. I have found Simple Accordians... But those never close, they just open another one.
我查看了整个互联网，只找到了非常复杂的脚本，但没有什么简单的。我找到了简单的手风琴……但那些永远不会关闭，他们只是打开另一个。
Thank you all for the help and I hope that I may be able to answer this same question for plenty of other people...
谢谢大家的帮助，我希望我可以为很多其他人回答同样的问题......
Note: I know very little JavaScript and or even jQuery.
注意：我对 JavaScript 甚至 jQuery 知之甚少。
回答by AlienWebguy
$('.expand-one').click(function(){
$('.content-one').slideToggle('slow');
});
回答by Biff MaGriff
I was looking at this and wanted a collapsible div that was already styled for me. Then I realized what I wanted was a single pane jquery-ui accordion.
我正在看这个，想要一个已经为我设计的可折叠 div。然后我意识到我想要的是单窗格 jquery-ui 手风琴。
<div id="collapse">
<h3>Collapse and Expand</h3>
<div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
collapsible: true,
active: false
});
</script>
回答by Tom Milligan
I wanted to do this with multiple divs, each with their own trigger. Building on AlienWebguy's answer above:
我想用多个 div 来做到这一点，每个 div 都有自己的触发器。基于 AlienWebguy 的上述回答：
HTML
HTML
<div>
<p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
<p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
<p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
<p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
Javascript
Javascript
$('.expand').click(function(){
target_num = $(this).attr('id').split('-')[1];
content_id = '#expandable-'.concat(target_num);
$(content_id).slideToggle('fast');
});
CSS
CSS
.expand {
font-weight: bold;
font-style: italic;
font-size: 12px;
cursor: pointer;
}
.expandable {
display:none;
}
div {
margin: 10px;
}
回答by Andrew
Bad idea to use accordion. Better is to create your own collapsible block.
使用手风琴的坏主意。更好的是创建自己的可折叠块。
Example:
例子：
function InitSpoilBlock(idClicked)
{
$(idClicked).on('click', function(e){
var textArray = ['blind','slide'];//here you can add other effects
var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];
$(e.target).parent().children(".HiderPanel").toggle(randomEffect);
});
}
so when you write such html:
所以当你写这样的html时：
<div class="HiderContainer">
<a href="#" class="Hider">More</a>
<div class="HiderPanel">
Spoiled block of html
</div>
</div>
and after page load you will call
页面加载后你会打电话
InitSpoilBlock('.Hider');
all blocks will be possible to collapse and hide with random animation. Or you can use one exact animation also.
所有块都可以通过随机动画折叠和隐藏。或者您也可以使用一个精确的动画。
