twitter-bootstrap - 图标未按预期显示

Question

我正在使用 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>

Answer 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>

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

片段:

.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>