5

我有一个功能正常的 Bootstrap 3.0 手风琴，当您单击其中一个主链接时会打开。唯一的问题是，如果您单击第二个主链接，第一个链接不会崩溃 - 它们都保持打开状态。

有没有办法让其他部分关闭，一次只打开一个？

HTML：

<div class="container">
  <!-- begin left nav -->
  <div class="col-sm-2">
    <div class="left-nav">
      <div class="accordion" id="accordion2">
        <!-- group start -->
        <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
          Main Link 1
          </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse"> <!-- add "in" to class to load acc section open -->
          <div class="accordion-inner">
          <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Product 1</a></div> <!-- add "selected-section" to add background color -->
          <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Product 2</a></div>
          <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Product 3</a></div>
          <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Product 4</a></div>
          </div>
        </div>
        </div> <!-- end group -->
        <!-- group start -->
        <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
          Main Link 2
          </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
          <div class="accordion-inner">
          <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div>
                       <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div>
          </div>
        </div>
        </div> <!-- end group -->
        <!-- group start -->
        <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
          Main Link 3
          </a>
        </div>
        <div id="collapseThree" class="accordion-body collapse">
          <div class="accordion-inner">
          <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div>
                       <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div>
          </div>
        </div>
        </div> <!-- end group -->
        <!-- group start -->
        <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
          Main Link 4
          </a>
        </div>
        <div id="collapseFour" class="accordion-body collapse">
          <div class="accordion-inner">
          <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div>
                       <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div>
          </div>
        </div>
        </div> <!-- end group -->
        <!-- group start -->
        <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle leftnav-primary" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive">
          Main Link 5
          </a>
        </div>
        <div id="collapseFive" class="accordion-body collapse">
          <div class="accordion-inner">
          <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div>
                       <div class="left-nav-section"><a href="product.html" class="leftnav-secondary">Link</a></div>
          </div>
        </div>
        </div> <!-- end group -->
      </div>
    </div>
  </div>
  <!-- /left nav -->
</div>

CSS：

body {
  margin: 10px;
  background-color: #eee;
}

.left-nav {
  width:200px;
  padding: 15px;
  font-size: 110%;
  text-transform: uppercase;
  background-color:#ff0;
   -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  background: rgb(255, 255, 255) transparent;
  background: rgba(255, 255, 255, 0.6);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)";
  overflow:hidden;
}

a.leftnav-primary:link { color:#363; text-decoration: none; }
a.leftnav-primary:visited { color:#363; text-decoration: none; }
a.leftnav-primary:hover { color:#6e2585; text-decoration: none; }
a.leftnav-primary:active { color:#363; text-decoration: underline; }

a.leftnav-secondary:link { color:#6c6f70; text-decoration: none; font-size: 90%; }
a.leftnav-secondary:visited { color:#6c6f70; text-decoration: none; font-size: 90%; }
a.leftnav-secondary:hover { color:#6e2585; text-decoration: none; font-size: 90%; }
a.leftnav-secondary:active { color:#6e2585; text-decoration: underline; font-size: 90%; }

.left-nav-section   { padding-left: 20px; }
.left-nav-section:hover { background-color: #eee; }

这是我的 JS Fiddle 和手风琴：http: //jsfiddle.net/lorkel/pK7cA/

4

3 回答 3

9

这是一个已知的引导问题：https ://github.com/twbs/bootstrap/issues/10966

如果您更改accordion-group为panel它会起作用（但可能没有所需的样式）

http://jsfiddle.net/pK7cA/1/

希望它会在不久的将来得到修复，以便它不依赖于panel使用data-parent.

于 2013-10-17T12:07:14.887 回答
2

有一种方法可以关闭其他人。如果有人像我一样来到这里寻找。

这样做的方法是保持与手风琴ID相同的“数据父级”。

如果父母是

<div class="panel-group" id="accordion123">

那么孩子们必须有：

<div class="panel panel-default">
     <div class="panel-heading" ... data-parent="#accordion123">
     </div>
</div>
于 2016-08-16T05:29:47.253 回答
0 
<div id="accordion" role="tablist" aria-multiselectable="true">
  All panels inside this..
</div>

在我们的例子中，问题出在 HTML 结构中，就像我们<div id="accordion>在 foreach 循环中一样。解决方法是对所有面板使用单个手风琴。

于 2017-09-29T06:58:22.133 回答