Bootstrap 手风琴允许多个打开

Question

我从 Bootstraps 自己的源代码中获取了这个手风琴代码。但是当我打开一个新的时，它不会折叠其他的。可能问题已经在这里得到解答，但我找不到它。感谢您的帮助。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

    <div class="container-fluid">
      <div class="navbar">
      </div>
      <div class="sidebar">

        <div class="accordion" id="accordion2">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Collapsible Group Item #1
              </a>
            </div>
            <div id="collapseOne" class="accordion-body in collapse" style="height: auto;">
              <div class="accordion-inner">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2
              </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
              <div class="accordion-inner">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                Collapsible Group Item #3
              </a>
            </div>
            <div id="collapseThree" class="accordion-body collapse" style="height: 0px;">
              <div class="accordion-inner">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="body">
      </div>
    </div>

    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

我认为您使用了错误的类来表示手风琴部分。根据 bootstrap 文档，它们以 panel-* 开头，而不是 accordion-*。
只需在 http://getbootstrap.com/javascript/#collapse-example-accordion.

查看工作示例

Answer 2

我没有看到任何 aria 参数。我使用了相同的示例表单 bootstrap 页面，但是有 aria 参数并且对我来说效果很好。

查看 bootstrap 页上的代码 http://getbootstrap.com/javascript/#collapse

Answer 3

如果您切换 Bootstrap 版本，您的代码将按原样工作 。我刚刚在本地使用 Bootstrap v2.3.2 对其进行了测试。您可能需要在本地下载和部署，而不是使用 CDN。

Answer 4

就像乔恩说的，你用错了类。这是您的示例，更改最少... 更改

class="accordion-group"

到

class="panel panel-default"

http://jsfiddle.net/g1tpwbsy/2/

这是最近的 bootstrap 手风琴： http://getbootstrap.com/javascript/#collapse-example-accordion

Bootstrap 手风琴允许多个打开

Bootstrap accordion allow multiple to open

jquery

twitter-bootstrap

jquery-ui-accordion