Question

所以我试着用一些jquery来制作我的小手风琴每当我按下手风琴时，他们都会打开一个班级并将班级移开。但是现在我想在手风琴中打开最多1个项目。我无法找到在我的代码中构建它的方法。

我认为maby 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内的LI，但我还没有真正开始工作。

小example到目前为止我已经构建了。

Answer 1

问题在于你不是要试图关闭其他人。打开/关闭点击的一个后，向上移动到.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动画，所以你只需要切换类。

只有1个手风琴项目保持开放状态

1 个答案: