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