使用jQuery像div一樣關閉手風琴？

Question

我有顯示3個項目的簡單代碼

當我按下標題（ $(".fileHeader") ）時，它應該先打開下一個元素，即下一個元素（隱藏的div）（ $(".LST_Documents") ）

草圖：

JSBIN：它確實起作用。

最重要的 ：

當我按下$(".fileHeader") -我需要關閉所有其他 $(".LST_Documents") ， 然后 （這就是為什么我使用promise ）打開相關的$(".LST_Documents") 。

問題是（看圖片）如果我再次按第一個$(".fileHeader") 。 發生的事情是先關閉然后再打開。 我希望它保持關閉狀態 。

PS

我可以用類（ .rowOpen或類似的東西）解決它，但我只想通過JS / JQ來解決。

如何增強我的代碼以使其按預期工作？

Answer 1

在向上滑動標題之前，只需保持標題的內容可見性狀態即可。 並僅在內容不可見時向下滑動內容。

這是小提琴 。

$(".fileHeader").on('click', function () {
    var content$ =  $(this).next(),
        isContentVisible = content$.is(':visible');

    $(".LST_Documents:visible").slideUp().promise().done(function () {
        if ( ! isContentVisible ) {
            content$.slideDown();
        }
    });

});

Answer 2

如何處理一個簡單的條件：

$(".fileheader").on('click', function() {    
    var next = $(this).next();
    if(next.is(':visible'))
    {
        next.slideUp();
    }
    else
    {
        $(".LST_Documents:visible").slideUp().promise().done(function() {
              next.slideDown();
        });
    }
});