Bootstrap崩溃:如何停用其他按钮?

时间:2018-07-03 07:46:02

标签: jquery css twitter-bootstrap bootstrap-4 collapse

在使用Bootstrap折叠时,我需要帮助。 我创建了3个崩溃的按钮。在我看来,只有一个按钮被折叠才是合乎逻辑的。 因此,我想在单击某个按钮时停用其他按钮。 也许有什么方法可以做到这一点?

非常感谢。

<div class="panel-group" id="accordion">
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button class="btn btn-default" type="button" data-toggle="collapse" data-parent="#accordion" data-target="#collapseexample1" aria-expanded="false" aria-controls="collapseexample1">some example text</button>
        </div>
        <div class="btn-group" role="group">
            <button class="btn btn-default" type="button" data-toggle="collapse" data-parent="#accordion" data-target="#collapseexample2" aria-expanded="false" aria-controls="collapseexample2">some text</button>
        </div>
    </div>
</div> 

<div class="row">
    <div class="col">
        <div class="collapse multi-collapse" id="collapseexample1">
            <div class="col-lg-4">
                random text
            </div>
        </div>
        <div class="collapse multi-collapse" id="collapseexample2">
            <div class="col-lg-4"></div>
            <div class="col-lg-4>
                random text again
            </div>
            <div class="col-lg-4"></div>
        </div>
    </div>
</div>

这是我的代码的简化示例。

2 个答案:

答案 0 :(得分:0)

您可以为其编写一个jquery函数。获取您的按钮元素,并在单击其中之一时切换其禁用状态。如果您搜索“一次将Bootstrap崩溃,然后展开一个”,您甚至应该找到很多现成的解决方案

答案 1 :(得分:0)

好吧,我想我会使用手风琴。 首先,我不喜欢它们,但是它们在小型设备上看起来更好。