使用类选择器时，引导折叠不会添加 .collapsed答案

【问题标题】：Bootstrap collapse doesn't add .collapsed when using class selector使用类选择器时，引导折叠不会添加 .collapsed
【发布时间】：2015-09-12 11:16:37
【问题描述】：

我正在使用 Bootstrap 3.3.4。我有一个带有页眉和页脚的面板，以及一个指示面板打开/关闭状态的字形图标。

如果我使用面板主体的 id 作为折叠的选择器，那么 Bootstrap 会正确地将 .collapsed 类应用于标题并且字形图标会发生变化。但是，我也想折叠页脚，所以我改为使用类选择器进行折叠。好消息是页脚现在也崩溃了；坏消息是 .collapsed 不再应用于标题，因此字形图标不会改变。

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 无法被应用的事情？单击标题时如何折叠正文和页脚？

【问题讨论】：

标签： twitter-bootstrap-3

【解决方案1】：

其实有一个解决方法，数据目标与类选择器一起工作，但实际上并没有改变父类。

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

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

【讨论】：

【解决方案2】：

答案如下：

使页脚面板成为正文面板的子面板。
在正文面板上使用类panel-collapse 而不是panel

第一项是key；第二个是适当的造型。我通过阅读 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>

【讨论】：

【解决方案3】：

bootstrap 仅将类添加到有#id 或 href 而不是类。

根据文档，您应该使用两个选项来定位折叠

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

或

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

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

【讨论】：

在“官方正确答案”之后寻找“真正正确答案”正在成为一种模式。非常感谢。
天哪，谢谢老兄，真的很喜欢！（caruso_g 是对的）