javascript - 当其他 div 扩展 bootstrap 时，div 不会折叠

Question

我已经尝试过之前针对同一类型问题发布的所有答案。基本上我希望这两个按钮两个排成一行，并且一次只有一个应该折叠。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="accordion">
  <a type="button" class="btn btn-danger" href="#sample1" data-toggle="collapse" aria-controls="sample1" data-parent="#accordion">Sample 1</a>
  <a type="button" class="btn btn-danger" href="#sample2" data-toggle="collapse" aria-controls="sample2" data-parent="#accordion">Sample 2</a>
  <div class="accordion-group">
    <div class="collapse" id="sample1">
      <h1> here comes the sample1</h1>
    </div>
    <div class="collapse" id="sample2">
      <h1> here comes the sample2</h1>
    </div>
  </div>
</div>

Answer 1

Bootstrap v3 如何实现 Accordion 在某种程度上是一个黑盒子(除非你真的深入幕后的 JS 逻辑)。然而，这是我根据一些测试了解到的:

1. 控件可以任意嵌套
2. Accordion 元素必须用 <div> 包裹起来类 .panel
3. 包装 div 必须是:
   • sibling
   • data-parent 中指定元素的直接后代属性(例如 #accordion 在你的例子中)，没有任何额外的嵌套

考虑到这一点，您可以对原始 DOM 进行以下更改:

1. 移动#accordion面板包装器的 ID
2. 控件可以位于页面上的任何位置，只要data-toggle="collapse" and data-parent="#accordion`"已声明 ;)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!--
  Controls can be arbitrarily nested, no problem
  As a proof-of-concept, I have nested them three <div>s deep :) 
-->
<div><div><div>
  <a type="button" class="btn btn-danger" href="#sample1" data-toggle="collapse" aria-controls="sample1" data-parent="#accordion">Sample 1</a>
  <a type="button" class="btn btn-danger" href="#sample2" data-toggle="collapse" aria-controls="sample2" data-parent="#accordion">Sample 2</a>
</div></div></div>

<div id="accordion" class="accordion-group">

  <!-- Panel elements must be direct child of data-parent (#accordion) -->
  <div class="panel">
    <div class="collapse" id="sample1">
      <h1> here comes the sample1</h1>
    </div>
  </div>

  <div class="panel">
    <div class="collapse" id="sample2">
      <h1> here comes the sample2</h1>
    </div>
  </div>

</div>