Question

你好我想在我的网站上实现一个可折叠的面板如果你不确定我说的是什么我使用这个代码：

<!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个这样的代码，那么每当我点击任何这些pannels标题时，它只会打开第一个我明白什么是错的它，因为当你点击面板标题时触发一个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将会向后滑动，如果我不再使用此功能做我上面描述的任何人都可以告诉我如何在我的网站上使用多个可折叠组，而不会在选择第二个选项时放弃功能滑回？感谢

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

Answer 2

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

正如@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>

Bootstrap多个可折叠面板错误

2 个答案: