jQuery切换不会在点击时关闭

Question

我有此代码用于手风琴样式切换。 效果很好，唯一的问题是，如果您单击打开的手风琴，它会先滑后滑。 它不会滑动关闭。

有什么想法吗？

谢谢！

//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合拢时，它将执行slideUp（由于已经合拢，实际上并没有做任何事情），然后将执行slideDown。 现在，当div展开时：div将会slideUp（这一次是因为Up没有折叠，所以它确实Up了），然后Down了。

更好的方法是使用SlideToggle。

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

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

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

Answer 2

抱歉，我不太了解您的代码正在发生什么，所以我从头重写了js部分： http : //jsfiddle.net/d503n47r/2/

$('body').on('click','.toggle h3 a', function(e){
    e.preventDefault();
    if($(this).parents('.toggles').hasClass('accordion')) return false;

    if ($(this).parents('.toggle').find('div').eq(0).hasClass('open')) {
            $(this).parents('.toggle').find('div').eq(0).removeClass('open').slideUp();
    } else {
            $('.toggle.open').removeClass('open');
            $(this).parents('.toggle').find('div').eq(0).addClass('open').slideDown();
    }

});

请看一下jquery UI，因为它对所有这些常见的事情都有很大帮助http://jqueryui.com/ （无需重新发明轮子）

Answer 3

MinusFour是正确的，它同时发射两个。

解决此问题的一种方法是执行一个if / then语句，检查它是否打开，然后触发依赖于此的打开/关闭。

这是JSfiddle的链接

我还向向上/向下滑动的容器添加了“ toggle-panel”类，以使后续内容更易于阅读。

 if($(this).closest('.toggle').hasClass('open')){
        console.log('open');
        $(this).parents('.toggle').find('.toggle-panel').slideUp(300);
        $(this).closest('.toggle').removeClass('open');
        return
    }
    else {
        console.log('close');
        $(this).parents('.toggles').find('.toggle h3 a i').attr('class','icon-plus-sign');
        $(this).parents('.toggle').find('.toggle-panel').slideDown(300);
        $(this).parents('.toggle').addClass('open');
    }