Question

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

我该如何解决这个问题？

＆＃13;

.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";
}

＆＃13;

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

＆＃13;

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>

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

摘录：

＆＃13;

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

＆＃13;

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

＆＃13;

图标未按预期显示

1 个答案: