Bootstrap 3 - 自动折叠井。如何...？答案

【问题标题】：Bootstrap 3 - Auto collapse wells. How...?Bootstrap 3 - 自动折叠井。如何...？
【发布时间】：2015-10-02 21:30:11
【问题描述】：

对某人来说可能是一个简单的问题，但对我来说很难弄清楚。

我正在使用以下 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”，然后点击“按钮 B”，然后 B 的内容应该可见，而“按钮 A”下的内容应该被隐藏。

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

对不起，如果我没有意义，请在这里尽力在英语方面做到最好。 :)

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

【问题讨论】：

标签： twitter-bootstrap-3 collapse

【解决方案1】：

您可以将其包装在一个 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')
})

【讨论】：

非常详细和有用的信息，我可以理解。高度赞赏。我只重命名了“手风琴”ID，因为我在页面的其他地方使用了它。但它完美地工作。泰。

【解决方案2】：

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>

【讨论】：