怎么一次只能打开一个手风琴呢

How can only allow 1 accordion to open up at a time?

本文关键字：一个 手风琴 一次      更新时间：2023-09-26

我有4个手风琴<--单击此处查看

  • 现在，当我点击"查看报告"

  • 那些btn有一个class=".sa-hide-btn-[a,b,c,d]"

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

  • 当我点击它们时，我注意到id="sa-collapse-[a,b,c,d]" 上有一个类in处于切换状态

我的目标

是调整我的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

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

您有一个名为list的变量，但在下面，您使用了list，也许是问题所在？

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

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");
      });
相关文章：