Question

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

我选择关闭任何其他开放式手风琴时遇到问题，所以如果我点击说产品1＆＃34;找到商店＆＃34;我希望所有其他手风琴都能关闭，而产品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>

你可以看到找到商店href =＆＃34;＃1＆＃34;，其中数字1对应于手风琴。现在我的页面上有8个产品，ID会从1增加到8，我个人认为这不是问题所在。

我试图触发关闭＆＃34;找到商店的所有手风琴＆＃34;点击如下。

$('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

嗯，有一些事情：

您的折叠切换链接包含data-parent="#accordion"。假设您实际上有一个包含所有这些产品的id的元素，单独应该足以满足您的行为。
您使用引用.accordion-body的JavaScript，但这样的类在任何地方都不存在。您在此处使用.panel-body进行可折叠。
虽然可能不是问题，但ID必须以字母字符开头，因此设置id="1"之类的内容无效HTML。

在展示新手风琴之前关闭所有现有的手风琴

1 个答案: