Question

我有两个按钮定义如下：

<button href="#select" class="btn btn-default" data-toggle="collapse">
       Select
</button>

<button href="#add" class="btn btn-default" data-toggle="collapse">
       Add
</button>

我有两个不同的div部分，定义如下：

<div id="select" class="collapse">
       Select your option
</div>

<div id="add" class="collapse">
        Add your option
</div>

点击“选择＆＃39;按钮，选择div折叠。
之后，如果我点击“添加＆＃39;按钮，添加div折叠在选择div下方。

我希望一次只显示一个div。如果选择＆＃39;单击，选择div应该折叠，之后如果用户点击“添加＆＃39; div，select div应该折叠并且只添加要显示的div，反之亦然。

我尝试了上述方法，但我没有达到预期的效果。有没有办法实现我想要的行为？

谢谢！

Answer 1

将两个div部分包装在.panel中，然后包装在具有id的父容器中。然后将ID作为data-parent属性添加到您的div

<div id="parent">
  <div class="panel">
    <div id="select" class="collapse" data-parent="#parent">
      Select your option
    </div>
  </div>
  <div class="panel">
    <div id="add" class="collapse panel" data-parent="#parent">
      Add your option
    </div>
  </div>
</div>

小提琴 - https://jsfiddle.net/dszc5q5r/

如何根据两个不同的按钮点击在两个不同的div部分折叠和折叠？

1 个答案: