Twitter bootstrap 引导4折叠,在内容之间切换,不关闭所选内容

Twitter bootstrap 引导4折叠,在内容之间切换,不关闭所选内容,twitter-bootstrap,Twitter Bootstrap,我有两个内容版本,应该根据访问者的选择显示。我叫它Choice1和Choice2。默认情况下会显示Choice1。我使用Bootstrap4.5的折叠组件。代码如下: <div class="container-fluid" id="Offer"> <p> <button class="btn btn-primary" type="button" data-toggle="co

我有两个内容版本,应该根据访问者的选择显示。我叫它Choice1和Choice2。默认情况下会显示Choice1。我使用Bootstrap4.5的折叠组件。代码如下:

<div class="container-fluid" id="Offer">
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#Choice1" aria-expanded="true" aria-controls="Choice1">Choice 1</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#Choice2" aria-expanded="false" aria-controls="Choice2">Choice 2</button>
</p>
<div class="collapse.show multi-collapse" id="Choice1" data-parent="#Offer">
<div class="row">
<div class="col-sm">
<p>Column 1</p>
</div>
<div class="col-sm">
<p>Column 2</p>
</div>
<div class="col-sm">
<p>Column 3</p>
</div>
</div>
</div>
<div class="collapse multi-collapse" id="Choice2" data-parent="#Offer">
<div class="row">
<div class="col-sm">
<p>Column 11</p>
</div>
<div class="col-sm">
<p>Column 22</p>
</div>
<div class="col-sm">
<p>Column 33</p>
</div>
</div>
</div>
</div>


选择1
选择2

第1栏

第2栏

第3栏

第11栏

第22栏

第33栏

我的问题是,按下按钮可以打开和关闭选项,而我希望所选选项始终保持打开状态。不断地按同一个选择不应该做任何事情,而应该让选择打开。我理解“数据切换”选项说明折叠使打开/关闭成为可能。如果我将其从选项1中删除,选项2将显示在其下方,它不会替换它

如何禁用“关闭选定选项”


谢谢

所以我用导航标签代替了折叠。导航标签完全满足了我的需要。

试试引导手风琴。这可以解决你的问题不,手风琴不能从简单的设计角度使用。非常感谢。