图标未按预期显示答案

【问题标题】：Icon is not displayed as expected图标未按预期显示
【发布时间】：2016-09-21 05:21:46
【问题描述】：

我正在使用 Bootstrap 面板（折叠和折叠）类来创建表单。我有两个面板，我希望一个开始打开，一个开始关闭。在面板标题上，当用户单击面板时，我使用 Glyphicon“^”来关闭/打开面板。在面板 2 中，它按预期启动，但在单击两次后，它应该显示的时候会显示向下的字形，应该显示的时候会显示向上的字形。代码示例演示得很好。

我该如何解决这个问题？

.btnAgregar:after {
  font-family: "Glyphicons Halflings";
  content: "\e113";
}
.btnAgregar.collapsed:after {
  content: "\e114";
}
.btnAgregar2:after {
  font-family: "Glyphicons Halflings";
  content: "\e114";
}
.btnAgregar2.collapsed:after {
  content: "\e113";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h5>Panel 1</h5>
      <span class="btn btn-xs btnAgregar" data-toggle="collapse" data-target="#formulario3"></span>
    </div>
    <div id="formulario3" class="collapse in">
      <div class="panel-body">
        <div class="col-md-12">
          A
        </div>
      </div>
    </div>
  </div>
</div>

<hr />

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h5>Panel 2</h5>
      <span class="btn btn-xs btnAgregar2" data-toggle="collapse" data-target="#formulario2"></span>
    </div>
    <div id="formulario2" class="collapse">
      <div class="panel-body">
        <div class="col-md-12">
          B
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

我对这个问题提交了一个非常重要的编辑，但我认为它澄清了你想要问的问题。如果有，请告诉我。
有没有你写的JS，还是这个纯引导功能？
与第一个 btn 相比，您的 CSS 中的内容在第二个 btn 中互换。
@Goose Pure Bootstrap.
@Reddy 是的，但是如果我为两者都设置相同的 CSS 没有任何反应，我必须在面板 2 上单击两次才能获得正确的功能

标签： twitter-bootstrap glyphicons

【解决方案1】：

btnAgregar2 类没用。

这一行：

<span class="btn btn-xs btnAgregar2" data-toggle="collapse" data-target="#formulario2"></span>

必须更改：

<span class="btn btn-xs btnAgregar collapsed" data-toggle="collapse" data-target="#formulario2"></span>

这是因为第二个面板必须在启动时折叠。

sn-p：

.btnAgregar:after {
  font-family: "Glyphicons Halflings";
  content: "\e113";
}
.btnAgregar.collapsed:after {
  content: "\e114";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h5>Panel 1</h5>
            <span class="btn btn-xs btnAgregar" data-toggle="collapse" data-target="#formulario3"></span>
        </div>
        <div id="formulario3" class="collapse in">
            <div class="panel-body">
                <div class="col-md-12">
                    A
                </div>
            </div>
        </div>
    </div>
</div>

<hr />

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h5>Panel 2</h5>
            <span class="btn btn-xs btnAgregar collapsed" data-toggle="collapse" data-target="#formulario2"></span>
        </div>
        <div id="formulario2" class="collapse">
            <div class="panel-body">
                <div class="col-md-12">
                    B
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

谢谢！就是这样