引导多个可折叠面板错误答案

【问题标题】：Bootstrap multiple collapsible panels error引导多个可折叠面板错误
【发布时间】：2016-02-23 05:29:46
【问题描述】：

您好，如果您不确定我在说什么，我想在我的网站中实现一个可折叠面板，我使用此代码：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <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="#collapse1">Panel 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">text here</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Panel 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">text here</div>
      </div>
    </div>
    </div>
  </div> 
</div>

</body>
</html>

现在的问题是，每当我尝试添加更多代码并假设我的网站上有 3 个这样的代码时，每当我点击这些面板标题中的任何一个时，它只会打开第一个我明白有什么问题的它，这是因为当您单击面板标题时它会触发一个 div，如果每个组中的 div id 都相同，那么单击它会将更改应用于第一个组，所以我重命名了

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Panel 1</a>

到

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1B">Panel 1</a>

还有

到

  <div id="collapse1B" class="panel-collapse collapse">

现在，每当我点击其中任何一个时，更改只会应用到它应该应用的那个，但是，正如您所看到的，如果您单击面板选项 1，选项 2 将向后滑动，如果我这样做，此功能将不再起作用做我上面描述的事情，谁能告诉我如何在我的网站上使用多个可折叠组，而不会失去选择第二个选项时向后滑动的功能？谢谢

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

只需删除id="accordion" 和data-parent="accordion"：

<div class="container">
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">Panel 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">text here</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse2">Panel 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">text here</div>
      </div>
    </div>
    </div>
  </div> 
</div>

【讨论】：

嗯你的问题不清楚。也许只是为所有面板和不同的 href 属性使用不同的 ID？因为在一个 HTML 页面上不能有超过 1 个相同 ID 的元素。

【解决方案2】：

data-parentattribute 指定触发时折叠的元素集合。我认为它就像一个广播组：只能选择一个。

正如@makshh 所说，如果您删除它，它将起作用。如果您希望链接多个可折叠项，则只需要使用该属性。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse1">Panel 1</a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">text here</div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse2">Panel 2</a>
                </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">text here</div>
            </div>
        </div>
    </div>
</div>

【讨论】：