Bootstrap关闭手风琴菜单

Question

我是新手引导，并使用引导手风琴创建了导航菜单。当我点击任何链接时，它将打开手风琴，但不会关闭打开的手风琴。我怎样才能做到这一点？

我创建了一个小提琴：http://jsfiddle.net/4qk86/

我的手风琴代码：

<li> 
     <div class="accordion-heading "> <a href="#accDash" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> 
             <span class="item-icon fontello-icon-monitor"></span> 
             <i class="chevron fontello-icon-right-open-3"></i> Dashboards 
            </a> 
     </div> 
     <ul class="accordion-content nav nav-list collapse in" id="accDash"> 
      <li class="active"> <a href="dashboard-one.html"> 
              <i class="fontello-icon-right-dir"></i> 
              <span class="hidden-tablet">Dashboard</span> Demo 1 
             </a> 
      </li> 
      <li> <a href="dashboard-two.html"> 
              <i class="fontello-icon-right-dir"></i> 
              <span class="hidden-tablet">Dashboard</span> Demo 2 
             </a> 
      </li> 
     </ul> 
    </li> 

Answer 1

在你的jsfiddle码位正常工作：手风琴菜单扩展，并且点击时，他们崩溃。也许在你的网站代码的其他地方有一个问题阻止了这一点。通常确保你的jQuery代码在$(document).ready();内解决了无法运行的正确代码的问题。

Answer 2

Bootstrap API页面显示您应该指定data-parent属性。然后，尝试添加data-parent =“accDash”给你的元素。

见http://getbootstrap.com/javascript/#collapse

希望它能帮助。

Answer 3

下面是Bootstrap site的示例（缩写为只有两个面板）。基本上，外部div是一个id，例如id="accordion"，并且为了产生手风琴效果（当您打开另一个可折叠元素时，当前元素关闭），您为每个标题设置data-toggle="collapse" data-parent="#accordion"。另一方面，如果要使每个可折叠面板彼此独立，以便一次可以打开多个面板，只需将其更改为data-toggle="collapse" data-target="collapseOne"，其中collapseOne指的是面板的ID点击标题打开。 （所以下一个小组将参考例如collapseTwo）。

这里的jfiddle以及玩。

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
     First collapsible panel 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Second collapsible panel 
     </div> 
    </div> 
    </div> 
</div>