Bootstrap 关闭手风琴菜单答案

【问题标题】：Bootstrap Close accordion menu'sBootstrap 关闭手风琴菜单
【发布时间】：2014-05-22 06:59:21
【问题描述】：

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

【问题讨论】：

请花时间正确显示您的代码，以便其他用户可以轻松阅读。目前，阅读您的代码非常困难。

标签： jquery twitter-bootstrap accordion

【解决方案1】：

您的 JSFiddle 中的那段代码可以正常工作：手风琴式菜单在单击时展开和折叠。也许您网站代码中的其他地方存在阻止这种情况的问题。通常确保您的 jQuery 代码在 $(document).ready(); 内可以解决无法运行的正确代码的问题。

【讨论】：

但是如果用户点击第二个，我想关闭第一个手风琴

【解决方案2】：

Bootstrap API 页面说您应该指定 data-parent 属性。然后，尝试将 data-parent="accDash" 添加到您的元素中。

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

希望对您有所帮助。

【讨论】：

【解决方案3】：

这是来自 Bootstrap site 的示例（缩短为只有两个面板）。基本上，外部 div 有一个 id，比如 id="accordion" 并产生手风琴效果（当您打开另一个可折叠元素时，当前元素关闭），您为每个标题设置 data-toggle="collapse" data-parent="#accordion"。

另一方面，如果你想让每个可折叠面板相互独立，以便一次可以打开多个面板，只需将其更改为data-toggle="collapse" data-target="collapseOne"，其中collapseOne指的是单击标题打开的面板。（例如，下一个面板将引用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>

【讨论】：