Javascript 仅允许1件手风琴物品保持打开状态

所以我试着用jquery来构建我的小手风琴 每次我按下手风琴时，他们都会打开一个类并移除关闭的类。 但现在我想在手风琴上最多打开一个项目。我想不出在我的代码中构建它的方法

我想，当已经有一个打开的类时，可以使用else if语句，当您按下按钮时，它将关闭，并将一个打开的类添加到当前项中

var accordion = ".accordion .section";

$(accordion).addClass("closed");

$(accordion).click(function(){
    var $this = $(this),
        $content = $this.find("ul");
    if(!$this.hasClass("closed")){
        TweenLite.to($content, 0.8, {height:0, ease: Power4.easeOut, y: 0 });
        $this.addClass("closed");
        $(accordion).append("closed")
        $this.removeClass("open");
    }
    else {
        TweenLite.set($content, {height: "auto"});
        TweenLite.from($content, 0.87, {height: 0, ease: Power4.easeOut, y: 0});
        $this.removeClass("closed");
        $this.addClass("open");
    }
});

像这样的

哦，对于它背后的（4），我也试图找到一种方法来计算李在1 ul内的数量，但我还没有真正做这方面的工作

---

到目前为止，我构建的规模很小。

问题是您没有试图关闭其他的。 打开/关闭单击的项目后，遍历到

.accordion

，然后选择项目，排除单击的项目，然后关闭它们

$(accordion).click(function(){
    var $this = $(this),
        $content = $this.find("ul");
    if(!$this.hasClass("closed")){
        TweenLite.to($content, 0.8, {height:0, ease: Power4.easeOut, y: 0 });
        $this.addClass("closed");
        $(accordion).append("closed")
        $this.removeClass("open");
    }
    else {
        TweenLite.set($content, {height: "auto"});
        TweenLite.from($content, 0.87, {height: 0, ease: Power4.easeOut, y: 0});
        $this.removeClass("closed");
        $this.addClass("open");
    }

    // close the others
    $(this).closest('.accordion').find('.section ul').not($content).each(function(){
        TweenLite.to($(this), 0.8, {height:0, ease: Power4.easeOut, y: 0 });
    });

});

---

我建议使用CSS动画，所以你只需要切换类

使用

滑动切换（）

和

同级（）有什么问题？