Bootstrap Collapse 切换显示/隐藏在 3 列没有手风琴

Question

我遇到了这个问题。我需要使用 js 显示和隐藏功能来完成 Bootstrap 手风琴功能的功能，但我不能使用手风琴，因为我需要将按钮放在 3 列组中并让折叠进入全宽。 目前，当我切换一个时，它会显示并隐藏那个。我需要它来显示当前的并隐藏其余的。 救命！

http://jsfiddle.net/Lowdl/pruggwqk/2/

    <div class="itl">
      <div class="container">
        <div class="row">
<div class="col-md-4" id="accordion">
<button type="button" class="btnRed" data-toggle="collapse" data-target="#collapseInvest" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseInvest">Find out more</button>
</div>

<div class="col-md-4 green">
<button type="button" class="btnGreen" data-toggle="collapse" data-target="#collapseTrust" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseTrust">Find out more</button>
</div>

<div class="col-md-4">
<button type="button" class="btnRed" data-toggle="collapse" data-target="#collapseLead" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseLead">Find out more</button>
</div>
            </div>
          </div>
    </div>

<div id="collapseInvest" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</P>

  </div>

<div id="collapseTrust" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</p>

  </div>

  <div id="collapseLead" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</p>

  </div>
</div>

Answer 1

你需要分组。这就是你想要的吗？

http://jsfiddle.net/alexqoliveira/pruggwqk/6/

    <div class="col-md-4"  >
<button type="button" class="btnRed" data-toggle="collapse" data-target="#collapseInvest" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseInvest">Find out more</button>
</div>

<div class="col-md-4 green">
<button type="button" class="btnGreen" data-toggle="collapse" data-target="#collapseTrust" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseTrust">Find out more</button>
</div>

<div class="col-md-4">
<button type="button" class="btnRed" data-toggle="collapse" data-target="#collapseLead" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseLead">Find out more</button>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
<div id="collapseInvest" class="collapse in">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</P>

  </div>

<div id="collapseTrust" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</p>

  </div>

  <div id="collapseLead" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</p>

  </div>
</div>
</div>
</div>