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

Question

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

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

草图：

JSBIN : it does work.

最重要的是：

当我按下$(".fileHeader")时 - 我需要关闭所有其他 $(".LST_Documents")和然后（这就是为什么我使用{{1} }）打开相关的promise。

如果我再按第一个$(".LST_Documents")，问题是（看图片）。 发生了什么，它关闭，然后重新开放。并且我希望它保持关闭。

P.S。

我可以用类（$(".fileHeader")或类似的东西来解决它），但我想通过JS / JQ来完成它。

如何增强代码以按预期工作？

Answer 1

在向上滑动之前，只需保持标题的内容可见性状态即可。并且仅在内容不可见时向下滑动内容。

这是fiddle。

$(".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();
        });
    }
});