jQuery slideToggle 一次一个 div 而不是全部独立
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5827451/
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 slideToggle one div at a time instead of all independently
提问by markratledge
I'm using the function below that toggles divs, and with it, any one of the entry-content divs can be opened or closed independently of all.
我正在使用下面的函数来切换 div，有了它，任何一个条目内容 div 都可以独立打开或关闭。
What would be great is if only one entry-content div would be open at any time. Clicking a closed entry-title div would close any other entry-content div and then open the one clicked. I need to stay with the html markup, as it is created dynamically by Wordpress. Is this possible?
如果任何时候都只打开一个条目内容 div，那就太好了。单击关闭的条目标题 div 将关闭任何其他条目内容 div，然后打开单击的那个。我需要保留 html 标记，因为它是由 Wordpress 动态创建的。这可能吗？
Function:
功能：
jQuery(document).ready(function($) {
$(".entry-content").hide('slow');
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
});
html
html
<div class="entry-post">
<h2 class="entry-title">Post Title 1</h2>
<div class="entry-content">Lorem Ipsum...
</div></div>
<h2 class="entry-title">Post Title 2</h2>
<div class="entry-content">Lorem Ipsum...
</div></div>
More of the same....
</div>
回答by Derek
Just close them all up again every time one is clicked:
每次点击时再次关闭它们：
jQuery(document).ready(function($) {
$(".entry-content").hide('slow');
$(".entry-title").click(function() {
$(".entry-content").hide();
$(this).parent().children(".entry-content").slideToggle(500); });
});
Example: http://jsfiddle.net/auUxk/
回答by Damb
Yes, you can just use this logic:
是的，你可以使用这个逻辑：
$(".entry-title").click(function() {
// hide all entry title elements
$('.entry-title').hide();
// show the clicked one
$(this).show();
});
You can adjust it to use toggle instead of hide/show.
您可以调整它以使用切换而不是隐藏/显示。
I am usually doing this kind of logic by assigning special css classes to elements (its better to have things separated). So when I click element, I add a class to it. But then, when you click another element, you have to elements with that class, but you want only one. So you have to modify it. First remove that class from all elements with it, and then add it to clicked element.
我通常通过为元素分配特殊的 css 类来执行这种逻辑（最好将事物分开）。所以当我点击元素时，我向它添加了一个类。但是，当您单击另一个元素时，您必须使用该类的元素，但您只需要一个。所以你必须修改它。首先从所有元素中删除该类，然后将其添加到单击的元素中。
$(".anyAffectedElement").click(function() {
// remove any instances of special class
$('.enabledElement').removeClass('eneabledElement');
// add special class to clicked element
$(this).addClass('enabledElement');
});
^ This is just a general logic how can you deal with things like this. In simple cases, that 'enabledElement' class just adds some special styling (like highlight).
^ 这只是一个一般的逻辑，你怎么能处理这样的事情。在简单的情况下，'enabledElement' 类只是添加了一些特殊的样式（如高亮）。
回答by Igor Laszlo
I did not understand those examples which were given by others, but finally i have found the answer in another place, if anyone needs a solution simplier (or different) : http://jsfiddle.net/bipen/zBdFQ/1/
我不明白其他人给出的那些例子，但最后我在另一个地方找到了答案，如果有人需要更简单（或不同）的解决方案：http: //jsfiddle.net/bipen/zBdFQ/1/
@markratledge - first you need to give id of your divs instead of classes...
@markratledge - 首先你需要给出你的 div 的 id 而不是类......
$("#link1").click(function(e) {
e.preventDefault();
$("#div1").slideDown(slow);
$("#div2").slideUp(slow);
});
$("#link2").click(function(e) {
e.preventDefault();
$("#div1").slideUp(slow);
$("#div2").slideDown(slow);
});
