css - Bootstrap 选项卡折叠/展开

Question

我想在 bootstrap 中创建一个带有可折叠标签页和向上/向下箭头的标签。

<ul class="nav nav-tabs">
   <li><a data-toggle="tab" href="#tab1">tab 1</a></li>
   <li><a data-toggle="tab" href="#tab2">tab 2</a></li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    <p>Tab 1 content.</p>
   </div>
  <div id="tab2" class="tab-pane fade">
    <p>Tab 2 content.</p>
  </div>
</div>

更新 我希望选项卡可以切换，以便在我再次单击时选项卡展开或折叠。

谢谢

Answer 1

像这样创建你的 HTML，

<ul class="nav nav-tabs">
   <li><a data-toggle="tab" href="#tab1">tab 1
          <span class="glyphicon glyphicon-menu-down"></span> 
          <span class="glyphicon glyphicon-menu-up"></span></a>
   </li>
   <li><a data-toggle="tab" href="#tab2">tab 2
          <span class="glyphicon glyphicon-menu-down"></span>
          <span class="glyphicon glyphicon-menu-up"></span></a>
   </li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    <p>Tab 1 content.</p>
   </div>
  <div id="tab2" class="tab-pane fade">
    <p>Tab 2 content.</p>
  </div>
</div>

然后像这样的CSS，

.nav-tabs>li>a>.glyphicon.glyphicon-menu-down{display:block;}
.nav-tabs>li>a>.glyphicon.glyphicon-menu-up{display:none;}
.nav-tabs>li.active>a>.glyphicon.glyphicon-menu-down{display:none;}
.nav-tabs>li.active>a>.glyphicon.glyphicon-menu-up{display:block;}

这可能会如您所愿。但是您可能必须根据需要设置样式。

这是我制作的一个工作示例 - http://www.bootply.com/2cSkBhK32r