Bootstrap 3 折叠其他答案

【问题标题】：Bootstrap 3 collapse othersBootstrap 3 折叠其他
【发布时间】：2016-08-06 12:44:51
【问题描述】：

所以我正在尝试创建一个如下图所示的折叠框。我需要展示几个这样的盒子，但是只要一个可折叠的盒子打开，我就想隐藏其他盒子。尝试使用引导折叠，但似乎存在 DOM 结构是必需的问题：https://github.com/twbs/bootstrap/issues/10966

有没有其他方法可以在没有 javascript 的情况下实现相同的行为？

这就是我的标记：

<div class="col-xs-12 col-sm-8 col-lg-10">
    <div class="row">
        <div class="col-xs-4 col-lg-2"><span class="text-uppercase">Var dates</span><span>$600.00</span><span><a data-target="#moreInfoPastAmount" data-toggle="collapse" aria-expanded="true" aria-controls="moreInfoPastAmount" data-parent="#moreInfo">+Past Amount</a></span></div>
        <div class="col-xs-4 col-lg-2"><span class="text-uppercase">Var dates</span><span>$400.00</span><span><a data-target="#moreInfoLateFees" data-toggle="collapse" aria-expanded="true" aria-controls="moreInfoLateFees" data-parent="#moreInfo">+Late Fees</a></span></div>
        <div class="col-xs-4 col-lg-2"><span class="text-uppercase">Mar 26</span><span>$200.00</span><span>Current Due</span></div>
    </div>
    <div id="moreInfo" class="row">
        <div class="col-xs-12">
            <div id="moreInfoPastAmount" class="arrow-box collapse in" aria-expanded="true">
                <div class="arrow left"></div>
                <p>Content goes here</p>
            </div>
            <div id="moreInfoLateFees" class="arrow-box collapse in" aria-expanded="true">
                <div class="arrow left"></div>
                <p>Content goes here</p>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap collapse

【解决方案1】：

经过一番研究，您只需要在 #moreInfo div 中添加一个 .panel 类，因为 Bootstrap 的折叠数据父级 - https://github.com/twbs/bootstrap/issues/10966 中存在一个错误。

<div id="moreInfo" class="row">
        <div class="panel col-xs-12"> <!-- Panel added here -->
            <div id="moreInfoPastAmount" class="arrow-box collapse" aria-expanded="true">

Demo Here

【讨论】：

我正在寻找一种无需 javascript 的方法；)
@KeithW。很抱歉在阅读您的问题时错过了这一点。我已经更新了我的答案，您需要做的就是添加面板类。