Question

对某人来说可能是一个简单的问题，但很难为我找到答案。

我使用以下html：

                <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#waarom" aria-expanded="false" aria-controls="waarom">Button A</button>
            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#spelregels" aria-expanded="false" aria-controls="spelregels">Button B</button>

            <div class="collapse" id="waarom">
              <div class="well waarom">
                <p>Ipsum Lorem text (button A)</p>
              </div>
            </div>

            <div class="collapse" id="spelregels">
              <div class="well spelregels">
            <p>Ipsum Lorem (button B)</p>
              </div>
            </div>

折叠有效，但是，它们都可以扩展。这不是我想要的结果。两者都开始崩溃（=好）。我点击了按钮A＆＃39;它扩展了，然后我点击按钮B＆＃39;那么B的内容应该是可见的，按钮A＆＃39;应隐藏。

总之;按B，显示B内容（并隐藏A内容）。

对不起，如果我没有意义，试着在这里尽我所能。：）

感谢您的时间和解决方案。我能找到的例子只是为“手风琴”而展示了这个，我不想要。所以，也许这甚至都不可能。

Answer 1

Bootstrap使用“collapse”和“collapse.in”类来分别折叠和展开div。

您可以创建一些按下每个按钮调用的javascript，并使用以下代码更改类以打开和关闭所需的div。

<script>
function expandA(){
document.getElementById("waarom").className = "collapse.in"; //Open A
document.getElementById("spelregels").className = "collapse"; //Close B
}

function expandB(){
document.getElementById("waarom").className = "collapse"; //Close A
document.getElementById("spelregels").className = "collapse.in"; //Open B
}
</script>

在此之后，您将在发生点击事件时调用函数

<button class="btn btn-primary" type="button" onclick"expandA()">Button A</button>
<button class="btn btn-primary" type="button" onclick"expandB()">Button B</button>

Answer 2

您可以将其包装在div中并使用一些jquery http://jsfiddle.net/2Dj7Y/2087/

<div id="accordion">
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#waarom" aria-expanded="false" aria-controls="waarom">Button A</button>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#spelregels" aria-expanded="false" aria-controls="spelregels">Button B</button>

    <div class="collapse collapse-well" id="waarom">
        <div class="well waarom">
            <p>Ipsum Lorem text (button A)</p>
        </div>
    </div>

    <div class="collapse collapse-well" id="spelregels">
        <div class="well spelregels">
            <p>Ipsum Lorem (button B)</p>
        </div>
    </div>
</div>


$('.collapse-well').on('show.bs.collapse', function () {
    $(this).closest("#accordion")
        .find(".collapse.in")
        .not(this)
        .collapse('toggle')
})

Bootstrap 3 - 自动倒塌井。如何...？

2 个答案: