Question

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

我的手风琴代码是：

<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>

Bootstrap Close手风琴菜单＆＃39; s

3 个答案: