平板视图中的折叠面板

我有一个工具栏。当我点击它时，屏幕上会出现许多面板作为下拉菜单。在平板电脑视图中，我希望所有面板都可以折叠，并且当我单击面板标题时，我希望打开面板主体。我是穷人的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>

来源

2014-06-09 Vishnu

<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; 
} 
}

来源

2014-06-09 06:41:03 Vishnu

正如您使用自举手风琴。您需要从panel-collapsediv中删除类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是类，这使得内容面板可见。所以如果你想让所有的面板崩溃，请将它从每个面板容器中移除。如果您希望只有一个面板可见而其他应该被折叠，则只能将其放置在该面板容器中。

让我知道这是否有帮助。 :-)

来源

2014-06-09 05:50:18

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">

看一看在demo这里把事情说清楚。

来源

2014-06-09 05:56:07

平板视图中的折叠面板

回答

相关问题