Jquery手风琴全部折叠答案

【问题标题】：Jquery accordion collapse allJquery手风琴全部折叠
【发布时间】：2011-11-19 17:16:45
【问题描述】：

我正在使用它来展开或折叠一些 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>

一切正常;-)

但我希望能够折叠所有打开的 div，除了通过 h3 点击打开的那个！

感谢您的帮助...

克里斯

【问题讨论】：

标签： jquery accordion collapse

【解决方案1】：

DEMO

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

如果您再次单击它，您甚至可以隐藏打开的一个！使用 TERNARY OPERATORS 的最小手风琴脚本。

如果您在理解方面需要帮助，我可以评论我的代码。

这是您的.active 的代码：

demo

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

【讨论】：

非常感谢...完美！

【解决方案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 accordion，我相信它可以用于此行为。（至少，我知道我以前用它做过这个，但我不记得具体是如何和该网站在 Intranet 上的，所以我现在看不到它。）

【讨论】：

【解决方案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;
});

【讨论】：