javascript - jquery切换不会在点击时关闭

Question

我有一个用于 Accordion 样式切换的代码。效果很好，唯一的问题是，如果您单击打开的 Accordion ，它会向上滑动然后再向下滑动。它不会滑动关闭。

有什么想法吗？

谢谢!

//toggles 2
$('body').on('click','.toggle h3 a', function(){

    if($(this).parents('.toggles').hasClass('accordion')) return false;

    $(this).parents('.toggles').find('.toggle > div').slideUp(300);
    $(this).parents('.toggles').find('.toggle h3 a i').attr('class','icon-plus-sign');
    $(this).parents('.toggles').find('.toggle').removeClass('open');

    $(this).parents('.toggle').find('> div').slideDown(300);
    $(this).parents('.toggle').addClass('open');

    //switch icon
    if( $(this).parents('.toggle').hasClass('open') ){
        $(this).find('i').attr('class','icon-minus-sign');
    } else {
        $(this).find('i').attr('class','icon-plus-sign');
    }

    return false;
});



<div class="toggles">

<div class="toggle accent-color"><h3><a href="#"><i class="icon-minus-sign"></i>First Accord</a></h3>
    <div>
    Content
    </div>
</div> 

<div class="toggle accent-color"><h3><a href="#"><i class="icon-minus-sign"></i>Second Accord</a></h3>
    <div>
    Content
    </div>
</div> 

Answer 1

这样做的原因很简单。你的函数总是执行slideUp和slideDown。以该顺序。因此，当你的 div 折叠时，它将执行 slipUp (这实际上不会产生任何东西，因为它已经折叠了)，然后它会 SlideDown 。现在，当 div 展开时: div 将向上滑动(这次它确实向上滑动，因为它没有折叠)，然后它将向下滑动。

更好的方法是使用 SlideToggle。

http://api.jquery.com/slidetoggle/

编辑:此外，您可以检查 div 是否折叠...

if($(element).is(':visible')){
   //expanded
} else {
   //collapsed
}