L'icône ne s'affiche pas comme prévu

J'utilise la classe du panneau Bootstrap (réduire et réduire) pour créer un formulaire. J'ai deux panels et je veux que l'un commence ouvert et l'autre pour commencer fermé. Sur le panneau, j'utilise un Glyphicon "^" pour fermer/ouvrir le panneau lorsque l'utilisateur clique dessus. Dans le panneau 2, il commence comme prévu, mais après avoir cliqué deux fois, il montre le glyphe vers le bas quand il devrait apparaître, et vers le haut quand il devrait montrer vers le bas. L'exemple de code démontre bien.L'icône ne s'affiche pas comme prévu

Comment puis-je résoudre ce problème?

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

Source

2016-09-20 User1899289003

j'ai soumis une modification à la question qui était assez importante, mais je pense qu'il clarifie ce que vous essayez de demander. Dites-moi si c'est le cas. – Goose

Y a-t-il un JS que vous avez écrit ou est-ce une fonctionnalité d'amorçage pure? – Goose

Le contenu de votre CSS est interchangé dans le second btn par rapport au premier. –

La classe btnAgregar2 est inutile.

Cette ligne:

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

doit être changé en:

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

Ceci parce que le deuxième panneau doit être replié au démarrage.

L'extrait:

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

Source

2016-09-20 21:21:46 gaetanoM

Merci! C'était ça – User1899289003

L'icône ne s'affiche pas comme prévu

Répondre

Questions connexes