怎样才能让一支手风琴一次打开？

Question

我有 4 accordions ＆lt; - 点击此处查看

• 现在点击＆＃34;所有这些都会打开查看报告＆＃34;
• 这些btns有class=".sa-hide-btn-[a,b,c,d]"

• 我的手风琴琴体有id="sa-collapse-[a,b,c,d]"

• 当我点击它们时，我注意到我的in

上的课程id="sa-collapse-[a,b,c,d]"正在切换

我的目标

是调整我的JS并且只允许 1 手风琴一次打开。

• 这意味着如果点击了任何btn：
• 我应该从手风琴的其余部分取下课程 in ，并只添加到点击的那个。

对吗？我的逻辑是否正确？

考虑到这一点 - 我想出了

 var lists = [ "a", "b", "c", "d" ];

    lists.forEach(function(list) {

      $(".sa-report-btn-" + list).click(function () {

        $("#sa-collapse-" + list).removeClass("in");

        $(".sa-hide-" + list).removeClass("hidden");
        $(".sa-report-" + list).addClass("hidden");



      });

      $(".sa-hide-btn-" + list).click(function () {

        $("#sa-collapse-" + list).addClass("in");

        $(".sa-hide-" + list).addClass("hidden");
        $(".sa-report-" + list).removeClass("hidden");

      });

结果

每次点击它们，我的手风琴都会打开。

Fiddle

有人可以告诉我我错过了什么吗？

Answer 1

你有一个名为列表的变量，但在下面，你使用了list，也许这就是问题？

Answer 2

我通过这样做解决了这个问题

var lists = [ "a", "b", "c", "d" ];

      lists.forEach(function(list) {

      $(".sa-report-btn-" + list).click(function () {

        $("*[class^='sa-report-']").removeClass("hidden");
        $("*[class^='sa-hide-']").addClass("hidden");


        $(".sa-hide-" + list).removeClass("hidden");
        $(".sa-report-" + list).addClass("hidden");

        $(".panel-collapse").removeClass("in");
        $("#sa-collapse-" + list).find( $(".panel-collapse") ).addClass("in");

      });



      $(".sa-hide-btn-" + list).click(function () {

        $(".sa-hide-" + list).addClass("hidden");
        $(".sa-report-" + list).removeClass("hidden");

      });