javascript - 如何在 bootstrap 中组合 pills、collapse 和 tabs？

Question

我正在尝试创建一些药丸，单击这些药丸会显示并在某些内容之间切换。

这很好用。

再次单击事件药丸时，我也想隐藏内容。这让我无法上类。

这是我当前的代码，您可以在这个 fiddle 上尝试:https://jsfiddle.net/9phcsmwa/1/

当您点击其中一个药丸时，它会显示内容，当您点击另一个药丸时，它会在内容之间切换，如标签。但是，如何在单击事件药丸时隐藏内容？

<div id="accordion">
    <div data-parent="#accordion" href="">
        <ul id="tabs" class="nav nav-pills" data-toggle="collapse" data-tabs="tabs">
            <li><a data-toggle="tab" href="#Pill1" class="btn btn-s-md btn-white m-b">Pill1</a></li>
            <li><a data-toggle="tab" href="#Pill2" class="btn btn-s-md btn-white m-b">Pill2</a></li>
            <li><a data-toggle="tab" href="#Pill3" class="btn btn-s-md btn-white m-b">Pill2</a></li>
        </ul>
    </div>
</div>

<div id="collapse" class="panel-collapse collapse in">
    <div class="tab-content">
        <div id="Pill1" class="tab-pane fade">
            <h3>Pill 1</h3>
            <p>Some content.</p>
        </div>
        <div id="Pill2" class="tab-pane fade">
            <h3>Pill 2</h3>
            <p>Some content for Pill 2.</p>
        </div>
        <div id="Pill3" class="tab-pane fade">
            <h3>Pill 3</h3>
            <p>Some content for Pill 3.</p>
        </div>
    </div>
</div>    

谢谢。

Answer 1

为此您不需要 javascript，您只需要更改所有对选项卡的引用即可折叠。选项卡旨在始终显示一个，但是，折叠是为了......折叠!

Here is you JSFiddle Updated

变化包括:

• 您所有的 data-toggle="tab" 现在都是 data-toggle="collapse"。
• 您所有的 class="tab-pane fade" 现在都是 class="collapse fade"。
• 将您的三个选项卡内容包装在一个面板中。这是由于 Bootstrap 中 data-parent 的错误。详情可found here .
• 删除了 data-parent="#accordion"，然后将 data-parent="#collapse" 添加到您的所有三个 Pill 中。