2015-10-15 108 views
1

我有這個問題。我需要使用隱藏功能來做什麼Bootstrap手風琴功能,但我不能使用手風琴,因爲我需要的按鈕是在3列組&有崩潰進入全角。 當前當我切換一個它顯示&隱藏那一個。我需要它來顯示當前的其餘&隱藏。 幫助!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> 

回答

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> 
+0

是的,這就是我想要的。我只需要默認關閉所有摺疊。只有當選擇一個時,它纔會下降。 & 反之亦然。這是非常接近的。謝謝! – Lorenzo

+0

只需在標記div'collapseInvest'中刪除類'in' – alexqoliveira

+0

完美!非常感謝你們。就像應該那樣工作。 – Lorenzo