jQuery SlideToggle 一次一个 div 而不是全部独立

Question

我使用下面的函数来切换 div，通过它，任何一个条目内容 div 都可以独立打开或关闭。

如果任何时候只打开一个条目内容 div，那就太好了。单击关闭的条目标题 div 将关闭任何其他条目内容 div，然后打开单击的那个。我需要保留 html 标记，因为它是由 Wordpress 动态创建的。这可能吗？

功能：

jQuery(document).ready(function($) {
$(".entry-content").hide('slow');
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
});

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>

Answer 1

每次单击时将其全部关闭即可：

jQuery(document).ready(function($) {
$(".entry-content").hide('slow');
$(".entry-title").click(function() {
    $(".entry-content").hide();
$(this).parent().children(".entry-content").slideToggle(500); });
});

示例：http://jsfiddle.net/auUxk/

Answer 2

是的，您可以使用这个逻辑：

$(".entry-title").click(function() {
    // hide all entry title elements
    $('.entry-title').hide();
    // show the clicked one
    $(this).show();
});

您可以调整它以使用切换而不是隐藏/显示。

我通常通过为元素分配特殊的 css 类来实现这种逻辑（最好将事物分开）。因此，当我单击元素时，我会向其添加一个类。但是，当您单击另一个元素时，您必须使用该类的元素，但您只需要一个。所以你必须修改它。首先从所有元素中删除该类，然后将其添加到单击的元素中。

$(".anyAffectedElement").click(function() {
    // remove any instances of special class
    $('.enabledElement').removeClass('eneabledElement');
    // add special class to clicked element 
    $(this).addClass('enabledElement');
});

^ 这只是一个一般逻辑，你怎么能处理这样的事情。在简单的情况下，“enabledElement”类只是添加一些特殊的样式（如突出显示）。

Answer 3

我不明白其他人给出的那些例子，但最后我在另一个地方找到了答案，如果有人需要更简单（或不同）的解决方案：http://jsfiddle.net/bipen/zBdFQ/1/

@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);
});