Bootstrap: cambia colore dell’intestazione del riquadro onClick

Ciao, mi sono dato un corso intensivo di bootstrap la scorsa notte e mi sto divertendo molto. Ho trovato online un pannello pieghevole che funziona davvero bene per quello che spero di ottenere nella mia barra di navigazione. Tuttavia voglio che il colore di sfondo dell’intestazione del pannello cambi quando espanso. Non ho abbastanza familiarità con il funzionamento interno del bootstrap eppure lo spoglio da solo (presto! Spero). Il codice in questione è di seguito:

 

Webforwork , Ciao.
Che ne dici di qualcosa di simile e cambiare la class, usando toggleclass .

CSS

  .panel-clr { background-color:greenyellow; } .panel-clr.on { background-color:dodgerblue; } 

JS

 $( function() { $('.panel-clr').click( function() { $(this).toggleClass('on'); } ) }); 

Spero che questo ti aiuti.

 < !DOCTYPE html>         Starter Template for Bootstrap       

È ansible fare riferimento al documento

Qui codice per te:

 $(".collapse").on('shown.bs.collapse',function(){ // change background when expanded }); $(".collapse").on('hidden.bs.collapse',function(){ // change background when hide }); 

La risposta di AngularJR è corretta ma l’ho trovata un po ‘difficile da capire con la mia conoscenza limitata del css e la conoscenza inesistente di jQuery. Inoltre sto usando reactjs e quindi modificare gli elementi DOM dopo che sono stati renderizzati non è stato un buon approccio per me.


Principio principale

Il principio di base di ciò che sta accadendo è che un tag di class extra viene aggiunto all’elemento html:

Così

 
...

diventa

 
...

Non importa in realtà come si aggiungono queste classi extra, jQuery ( $ ) è solo un’opzione.

A questi due div possono essere applicate diverse regole CSS utilizzando i selettori CSS:

 .panel-heading { background-color:greenyellow; } 

e

 .panel-heading.on { background-color:dodgerblue; } 

rispettivamente.

Si noti che non c’è spazio tra .panel-heading e .on . Vedere la seguente domanda di overflow dello stack per ulteriori informazioni: Qual è la differenza tra le classi CSS .foo.bar (senza spazio) e .foo .bar (con spazio) .


Il mio a parte per risolvere il problema quando si utilizza reactjs

Tuttavia, nel caso di utilizzo di react-bootstrap, il div "panel-heading" viene creato automaticamente dal tag e l’elemento

non può essere cercato e consultato dopo che è stato reso (il ciclo di vita della reazione è strano). Quindi nessuna class extra può essere aggiunta ad essa.

Quindi la class extra, "on" , deve essere aggiunta a un elemento genitore del div di panel-heading del panel-heading :

html (o .jsx):

 
...STUFF...

restituisce un DOM simile a questo (leggermente semplificato):

 
My Title
.....STUFF.....

Ora c’è un div esterno con la class "on" e il div "panel-heading" è contenuto al suo interno.

Il div di intestazione del pannello può ora essere stilizzato in css usando i seguenti selettori:

 .panel-heading { background-color:greenyellow; } 

e

 .on .panel-heading { background-color:dodgerblue; } 

Notare come il selettore .panel-heading trova ora prima del selettore .panel-heading e c’è anche uno spazio tra i due selettori; questo perché l’elemento con la class .on è ora un antenato dell’elemento con la class .panel-heading .

Nota: aggiungere la class extra "on" direttamente a e non racchiudere il pannello in un div aggiuntivo funzionerebbe allo stesso modo.

Ora il gestore “onClick” può cambiare la class dell’elemento genitore per influenzare lo stile dell’intestazione del pannello, che è molto più facile che cercare nel DOM il "panel-heading div" (IMHO) corretto. E in modo cruciale, nel mio caso di usare reactjs, questa class "on" può essere specificata direttamente per un elemento quando si chiama la routine di rendering.