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>

一切正常; - ）

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

感谢您的帮助......

克里斯

Answer 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());
});

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 accordion，我相信这个行为有一个选项。（至少，我知道我之前已经用它完成了这个，但是我不记得具体如何以及该网站是否在内部网上，所以我现在看不到它。）

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

Jquery手风琴全部崩溃

3 个答案:

DEMO

demo