如何在 jQuery 中展开已折叠的 div 时，折叠所有已展开的 div？

Question

我正在使用这个来展开或折叠一些div。

    $("h3.trigger").click(function(){
    $(this).toggleClass("active").next().fadeToggle(500,"swing");
    return false;
});

在这段HTML代码中，

    <div class="foo">
    <h3 class="trigger active">Test 1</h3>
    <div class="block" style="display:block">
        <p>Lorem ipsum dolor </p>
    </div>
</div>
<div class="foo">
    <h3 class="trigger">Test 2</h3>
    <div class="block" style="display:none">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>
<div class="foo">
    <h3 class="trigger">Test 3</h3>
    <div class="block" style="display:none">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

一切都工作正常 ;-)

但我希望能够折叠除 h3 点击打开的 div 之外的所有已打开的 div！

感谢您的帮助...

Chris

- Chris

Answer 1

DEMO

$('.trigger').click(function() {
    var d = $(this).next('.block');
    check = (d.is(':visible')) ? d.slideUp() : ($('.block').slideUp())(d.slideDown());
});

这将使您甚至可以在再次单击时隐藏已打开的内容！使用三元运算符的最小手风琴脚本。

如果需要帮助理解，我可以对代码进行注释。

以下是带有您的 .active 的代码：

演示

$('.trigger').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
    var d = $(this).next('.block');
    check = (d.is(':visible')) ? d.slideUp() : ($('.block').slideUp())(d.slideDown());
});

- Roko C. Buljan

Answer 2

这个怎么样？

$("h3.trigger").click(function(){
  $("h3.trigger").each(function() {
    $(this).removeClass("active").next().fadeOut(500, "swing"); 
  });
  $(this).addClass("active").next().fadeIn(500,"swing");
  return false;
});

您还可以使用jQuery UI手风琴，我相信它有一个选项可以实现这种行为。（至少我之前用过它来做这个，但我不记得具体是怎么做的，而且该网站在内部网络上，所以我目前无法查看。）

- David

Answer 3

你需要做的是先关闭所有切换元素，然后打开刚刚被点击的那个，但仅当当前未打开该已被点击的元素时才进行操作。以下代码可实现此功能：

$("h3.trigger").click(function(){
    $(".foo").fadeOut(500,"swing");
    if(!$(this).toggleClass("active").next().is(':visible')){
        $(this).toggleClass("active").next().fadeIn(500,"swing");
    }
    return false;
});

- Chris