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

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>

折叠有效，但是，它们都可以展开。这不是我想要的结果。两者都开始崩溃（=好）。我点击 'Button A' 它展开，然后我点击 'Button B' 然后 B 的内容应该是可见的，'Button A' 下的内容应该被隐藏。

简而言之；按 B，显示 B 内容（并隐藏 A 内容）。

对不起，如果我说得不对，我会尽力在这里用英语。 :)

感谢您抽出时间提供解决方案。我能找到的例子只显示了我不想要的 'Accordion'。所以，也许这甚至是不可能的。

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 - 自动塌陷井。如何...？

Bootstrap 3 - Auto collapse wells. How...?

collapse

twitter-bootstrap-3