平板電腦視圖中的折疊面板

Question

我有一個工具欄。 當我點擊它時，屏幕上會出現許多面板作為下拉列表。 在平板電腦視圖中，我希望所有面板都折疊，當我點擊面板標題時，我希望面板體打開。 我很窮css任何人都可以幫助我。 這是代碼。

<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
    <div class="panel-body">
        <div class="panel panel-info">
            <div class="panel-heading">
                <a >First heading</a>
            </div>
            <div class="panel-body">
                <ul class="">
                    <li><a >item1</a></li>
                    <li><a >item2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
        <div class="panel-body">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <a>second heading</a>
                </div>
                <div class="panel-body">
                    <ul class="">
                        <li><a >item4</a></li>
                        <li><a >item3</a></li>
                    </ul>
                </div>
            </div>
        </div>

Answer 1

當你使用bootstrap手風琴時。 您需要從panel-collapse div刪除class in 。

代替

<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">

寫

<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse" style="height: auto;">

in是類，它使內容面板可見。 因此，如果您希望所有面板都折疊，請從每個面板容器中將其刪除。 如果您只想顯示一個面板而其他面板應該折疊，則只將其放在該面板容器中。

如果這有幫助，請告訴我。 :-)

Answer 2

Bootstrap具有針對這些類型任務的專用類和data-*屬性。

1）首先，為了使您的面板成為手風琴，您需要給出：

<a data-toggle="collapse" data-target="#panel1">Heading</a>

其中panel1是panel-body的id。

2）其次，因為你想你的panel-body首先要崩潰了，給collapse旁邊類panel-body ：

<div id="panel1" class="panel-body collapse">

看看這里的演示 ，讓事情變得清晰。

Answer 3

<div class="panel-body columnBody" id="accordion2">
 <div class="panel panel-info">
  <div class="panel-heading">
   <a data-toggle="collapse" data-parent="#accordion" data-target=".Empty">{{item.key}}</a>
   <button class="btn navbar-btn displayMobile" data-parent="#accordion2" data-target=".view{{$index}}"><span class="caret"></span></button>
  </div>
  <div class="panel-body itemList view{{$index}}">
   <ul style="margin-bottom: 0px;">
    <li ng-repeat="ke in item.values"><a href="#about" data-toggle="collapse" data-parent="#accordion" data-target=".Empty">{{ke}}</a></li>
   </ul>
  </div>
 </div>
</div>

css代碼：

@media screen and (min-width: 850px){
 .displayMobile{
  display: none;
 }    
 .itemList{
  display: none;
}
}