アイコンが期待通りに表示されない

Question

私は、フォームを作成するためにブートストラップパネル（折りたたみと折り畳み）クラスを使用しています。私は2つのパネルを持っています。私は1つを開き始め、もう1つは閉じていきます。パネルの見出しでは、グリフコン "^"を使用して、ユーザーがパネルをクリックするとパネルを閉じたり開いたりします。パネル2では、期待どおりに開始されますが、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 btnAgregar collapsed" data-toggle="collapse" data-target="#formulario2"></span> 

これ：

<span class="btn btn-xs btnAgregar2" 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>