引导标签折叠/展开

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>

UPDATE 我希望标签可以切换，以便当我再次单击它时，标签会展开或折叠。

谢谢

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