使用类选择器时，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而不是class。

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

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

或

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

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

Answer 2

实际上，有一种解决方法，数据目标与类选择器一起使用但实际上不会更改父类。

在父元素上，您可以处理onClick事件，例如：

onClick="(e) => { e.currentTarget.classList.contains("collaspsed") ? e.currentTarget.classList.remove("collaspsed") : e.currentTarget.classList.add("collaspsed"); }"

Answer 3

以下是答案：

• 使页脚面板成为正文面板的子项。
• 使用正文面板上的课程panel-collapse代替panel

第一项是关键;第二个是适当的造型。我通过阅读this issue偶然发现了解决方案。

以下是修订后的jsFiddle及更新后的HTML。

更新了HTML

<div class="panel">
    <div id="theHeader" class="panel-heading collapsible" data-target="#theBody" data-toggle="collapse">Collapse using id as the selector</div>
    <div id="theBody" class="panel-collapse collapse in">nim pariatur cliche reprehenderit, enim eiusmod high life.
        <div id="theFooter" class="panel-footer collapse in">
            <button class="btn btn-default"> <span class="glyphicon glyphicon-grain"></span>
            </button>
        </div>
    </div>
</div>