javascript - 使用jQuery关闭手风琴相似的div？

Question

我有这个简单的代码，它显示了 3 个项目

当我按下标题（$(".fileHeader")）时，它应该打开下一个元素，即下一个元素（隐藏的 div）（$(".LST_Documents")）

草图：

JSBIN：它确实有效。

最重要的 ：

当我按下$(".fileHeader")- 我需要关闭所有其他 $(".LST_Documents")然后（这就是 我使用的原因promise）打开相关$(".LST_Documents")。

问题是（看图片）如果我再次按下第一个$(".fileHeader")。发生的事情是它关闭然后重新打开。我希望它 保持关闭。

附言

我可以用类（.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();
        });
    }
});