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手风琴时。您需要从in panel-collapse删除课程div。

而不是

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

请在此处查看 demo 以明确说明。

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

平板电脑视图中的折叠面板

3 个答案: