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（它实际上没有任何东西，因为它已经崩溃了）然后它会滑落。现在，当div被展开时：div将会滑动（这次它会因为它没有折叠而上升）然后它会变为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语句，检查它是否打开，然后根据它开启/关闭。

Here's a link to a JSfiddle

我还添加了课程＆＃34; toggle-panel＆＃34;向上/向下滑动的容器，以便更容易阅读。

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

点击时jquery切换不会关闭

3 个答案: