Aggiunta dell'icona di apertura/chiusura ai dispositivi pieghevoli Bootstrap di Twitter (fisarmoniche)

2022-07-29 13:30:20

Ho impostato questa semplice versione della fisarmonica Bootstrap:< /p>

Fisarmonica semplice: http://jsfiddle.net/darrenc/cngPS/

Attualmente l'icona punta solo verso il basso, ma qualcuno sa quale JS sarebbe necessario per essere implementato in modo da cambiare la classe dell'icona in:

<i class="icon-chevron-up"></i>

...in modo che punti in alto quando espanso e torni nuovamente a in basso quando è compresso, e quindi quarto?

- Darren

Source

Risposta

Ecco la risposta per coloro che cercano una soluzione in Bootstrap 3 (come me).

La parte HTML:

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
    <span class="glyphicon glyphicon-minus"></span>
  </button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>

La parte js:

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

Esempio di fisarmonica:

Esempio di fisarmonica Bootply

Aggiunta dell'icona di apertura/chiusura ai dispositivi pieghevoli Bootstrap di Twitter (fisarmoniche)

Risposta

La parte HTML:

La parte js:

Esempio di fisarmonica:

Tag simili

domande correlate