Javascript 引导手风琴：当点击另一个时不会自动折叠

我知道有类似的帖子，但我找不到答案

我有一点自定义布局，但我想尝试添加手风琴效果，但我似乎不明白为什么，但出于某种原因，一切都很好，除了它们不会在单击另一个后自动关闭

这是我的手风琴密码：

   <aside class="col-lg-4">
    <div class="list-group">
     <ul class="product-sorting">
      <div id="accordion" role="tablist" aria-multiselectable="true" class="panel panel-group">
       <li><a href="#" data-group="all" class="list-group-item active">All Products</a></li>
       <li>
         <a data-group="IQF" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">IQF Fruits (Individually Quick Frozen)
         </a>
         <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
          <div class="panel-body">
            <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
          </div>
         </div>
       </li>
       <li>
         <a data-group="Fruit-Concentrate" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
         Fruit Juice Concentrate
         </a>
         <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
          <div class="panel-body">
            <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
          </div>
         </div>
       </li>
       <li>
         <a data-group="Puree-pulp" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
         Fruit Puree/ Pulp
         </a>
         <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
          <div class="panel-body">
            <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
          </div>
         </div>
       </li>
       <li>
         <a data-group="Puree-Concentrate" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
         Fruit Puree Concentrate
         </a>
         <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
          <div class="panel-body">
            <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
          </div>
         </div>
       </li>
       <li>
         <a data-group="NFC" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
         NFC
         </a>
         <div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5">
          <div class="panel-body">
            <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
          </div>
         </div>
       </li>
       <li>
         <a data-group="Organic" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="false" aria-controls="collapse6">
         Organic
         </a>
           <div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading6">
          <div class="panel-body">
            <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
          </div>
         </div>
       </li>
       <li>
         <a data-group="Dried" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse7" aria-expanded="false" aria-controls="collapse7">Dried Fruit/ Sweetened Dried Fruit
         </a>
         <div id="collapse7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading7">
          <div class="panel-body">
            <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p>
          </div>
         </div>
       </li>
       </div>
     </ul>
    </div>  
  </aside>

直接从水果/蔬菜中榨出的果汁。100%果汁不含添加糖或防腐剂



直接从水果/蔬菜中榨出的果汁。100%果汁不含添加糖或防腐剂



直接从水果/蔬菜中榨出的果汁。100%果汁不含添加糖或防腐剂



直接从水果/蔬菜中榨出的果汁。100%果汁不含添加糖或防腐剂



直接从水果/蔬菜中榨出的果汁。100%果汁不含添加糖或防腐剂



直接从水果/蔬菜中榨出的果汁。100%果汁不含添加糖或防腐剂



直接从水果/蔬菜中榨出的果汁。100%果汁不含添加糖或防腐剂

这就是它看起来的样子：

文字“直接从水果/蔬菜中榨取的果汁。100%果汁不含添加糖或防腐剂。”只是虚拟文字。所有面板都是一样的，所以不要让它迷惑你

使用

并将

data parent=“#parentdivid”

分配给每个手风琴

示例代码段：

手风琴折叠
问题1？
..
问题2？
..
问题3？
...

我现在在代码中尝试了这一点，但不起作用。-您还需要什么其他信息？如果你愿意，我可以发布更多。谢谢你，普拉维斯，这对我来说太完美了！