使用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();
        });
    }
});