在显示新手风琴之前关闭所有打开的现有手风琴

Question

在我的页面上，我有 8 个产品，每个产品都有自己的手风琴，单击时会展开并显示其他内容。

我在尝试关闭任何其他打开的手风琴时遇到问题，因此如果我点击说产品 1“查找商店”，我希望所有其他手风琴都关闭，产品 1 手风琴打开。

我已经用谷歌搜索了这个并找到了可能的解决方案，如下所示

bootstrap-js-accordion-collapse-expand
bootstrap-3-collapse-accordion-collapse-all-works-but-then-cannot-expand-all-wh

但无济于事，我目前对每个产品的HTML如下

<div class="col-lg-4" style="margin-bottom:5%;">
   <div class="boxTop"></div>
       <div class="box">
          <img src="/Content/Images/YogurtImages_280x135/Blueberry_Yogurt.png" width="280" height="135" class="productMarginTop">
          <br />
          <p style="color: #003869; font-size: 25px;" class="productTitle text-center">
             BLUEBERRY
          </p>
          <br />
          <hr style="border: 0.2px solid #003869" />
          <h5 style="color: #003869; font-size:19px" class="text-center" id="nutritionInfo" data-productid="1" data-colorcode="#003869" data-productname="BLUEBERRY">
            NUTRITIONAL INFO <span class="glyphicon glyphicon-chevron-right"></span>
          </h5>
          <hr style="border: 0.2px solid #003869" />
           <h5 class="text-center" id="findStore">
              <a data-toggle="collapse" data-parent="#accordion" href="#1" aria-expanded="true" aria-controls="1" style="color: #003869;font-size:19px" class="text-center">
                 FIND A STORE <span class="glyphicon glyphicon-chevron-down"></span>
              </a>
          </h5>
          <div id="1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              <p>
                 Content
              </p>
               <p>
                 More Content
              </p>
              </div>
            </div>
             <hr style="border: 0.2px solid #003869" />
        </div>
       <div class="boxBtm"></div>
 </div>

您可以看到 find store href="#1"，其中数字 1 对应于手风琴。现在，由于我的页面上有 8 个产品，ID 将从 1 增加到 8，我个人认为这不是问题。

我正在尝试触发关闭“查找商店”点击中的所有手风琴，如下所示。

$('h5:not(#nutritionInfo)').click(function () {

        $('.accordion-body').each(function () {
            if ($(this).hasClass('in')) {
                $(this).collapse('toggle');
            }
        });

 //$('.accordion-body.in').collapse('toggle');
 //$('.accordion-body').collapse('hide');

    });

但正如我所提到的，这似乎根本不起作用，我确实认为可能没有调用该函数，因此我在该函数内放置了一个警告框，它确实提醒了我的消息。

如果有人能提供帮助，我将不胜感激。

** 更新 jquery **

 $('.panel-body').each(function () {
        if ($(this).hasClass('in')) {
            $(this).collapse('toggle');
        }
    });

Answer 1

好吧，有几件事：

1. 您的折叠切换链接有data-parent="#accordion"。 单独应该足以满足您想要的行为，假设您实际上有一个具有该 id 的元素包装了所有这些产品。

2. 您使用的 JavaScript 引用了 .accordion-body，但这样的类在任何地方都不存在。您在此处使用 .panel-body 用于折叠。

3. 虽然可能不是问题，但 ID 必须以字母字符开头，因此设置 id="1" 之类的内容是无效的 HTML。