Bootstrap 3 崩了别人
Bootstrap 3 collapse others
所以我正在尝试创建一个折叠框,如下图所示。我需要显示几个这样的框,但想在打开一个可折叠框时隐藏其他框。尝试使用 bootstrap collapse 但看起来有一个问题 DOM 结构是 required: 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>0.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>0.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>0.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>
经过一番研究,由于 Bootstrap 中的错误,您只需在 #moreInfo
div 中添加一个 .panel
class折叠数据父级 - 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">
所以我正在尝试创建一个折叠框,如下图所示。我需要显示几个这样的框,但想在打开一个可折叠框时隐藏其他框。尝试使用 bootstrap collapse 但看起来有一个问题 DOM 结构是 required: 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>0.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>0.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>0.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>
经过一番研究,由于 Bootstrap 中的错误,您只需在 #moreInfo
div 中添加一个 .panel
class折叠数据父级 - 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">