使用类选择器时,Bootstrap折叠不会添加.collapsed

Question

我正在使用Bootstrap 3.3.4.我有一个带有页眉和页脚的面板,以及一个表示面板打开/关闭状态的字形.

如果我使用面板主体的id作为折叠选择器,则Bootstrap会正确地将.collapsed类应用于标题,并且glyphicon会更改.但是,我还想折叠页脚,所以我改为使用类选择器进行折叠.好消息是页脚现在也崩溃了; 坏消息是.collapsed不再应用于标题,因此glyphicon不会改变.

CSS

.collapsible {
    cursor: pointer;
}
.panel-heading.collapsible:after {
    font-family:"Glyphicons Halflings";
    content:"\e114";
    float: right;
    color: darkslategary;
}
.panel-heading.collapsible.collapsed:after {
    content:"\e080";
}

HTML

<div class="panel">
  <div id="theHeader2" class="panel-heading collapsible" data-target=".shrinkme" data-toggle="collapse">Collapse</div>
  <div id="theBody2" class="panel-body shrinkme collapse in">
        nim pariatur cliche reprehenderit, enim eiusmod high life
  </div>
  <div id="theFooter2" class="panel-footer shrinkme collapse in">
    <button class="btn btn-default">
      <span class="glyphicon glyphicon-tree-deciduous"></span>
    </button>
  </div>
</div>

jsFiddle演示两个选择器

我在做一些.collapsed不能应用的东西吗？单击标题时如何折叠主体和页脚？

Answer 1

bootstrap只将类添加到#id或href而不是类.

根据你想要使用两个选项来定位崩溃的文档

   data-toggle="collapse" href="#collapseExample" 

要么

    data-toggle="collapse" data-target="theBody2"

这样您就不必cursor:pointer手动添加