Das Symbol wird nicht wie erwartet angezeigt.

Question

Ich benutze die Bootstrap-Gruppe (in Klassen zusammenfalten und reduzieren), um ein Formular zu erstellen. Ich habe zwei Tafeln und ich möchte, dass einer offen und einer geschlossen beginnt. In der Kopfzeile verwende ich ein Glyphicon "^", um das Fenster zu schließen/zu öffnen, wenn der Benutzer darauf klickt. In Panel 2 startet es wie erwartet, aber nachdem es zweimal geklickt hat, zeigt es das Down Glyph an, wenn es angezeigt wird, und höher, wenn es angezeigt werden soll. Das Codebeispiel zeigt gut.

Wie kann ich das lösen?

.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

Die Klasse btnAgregar2 ist nutzlos.

Diese Zeile:

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

muss geändert werden:

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

Dies, weil die zweite Platte muss beim Start ausgeblendet werden.

Das Snippet:

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