jquery - 在 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!

感谢您的帮助...

克里斯

Answer 1

DEMO

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

如果您再次单击它，您甚至可以隐藏打开的窗口!使用三元运算符的最小 Accordion 脚本。

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

<小时/>

这是您的 .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());
});