Bootstrap 3 Collapse: aggiunta della class triggers al pannello aperto

prima di tutto ecco il violino: http://jsfiddle.net/krish7878/h38jn324/

Semplice domanda quando si fa clic su un pannello (e si espande per mostrare il suo contenuto rispettivo), una “class” triggers deve essere aggiunta a “panel-heading”.

Ho trovato una domanda simile ma nessuna di queste soluzioni sembra funzionare (stranamente). Qualsiasi aiuto sarebbe apprezzato.

Codice HTML:

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Codice JS:

 jQuery('.accordion-2 .panel-heading a[data-toggle="collapse"]').on('click', function () { jQuery('.accordion-2 .panel-heading a[data-toggle="collapse"]').removeClass('actives'); $(this).addClass('actives'); 

});

Prova questo:

 $('.panel-heading a').click(function() { $('.panel-heading').removeClass('active'); if(!$(this).closest('.panel').find('.panel-collapse').hasClass('in')) $(this).parents('.panel-heading').addClass('active'); }); 

Controlla la demo di JSFiddle

Aggiornamento 1: per impostare un pannello come attivo per impostazione predefinita sul primo caricamento, basta aggiungere manualmente la class active all’intestazione del panel-heading nel codice HTML.

Aggiornamento 2: Sebbene questa risposta sia contrassegnata come risposta accettata, consiglio vivamente di dare un’occhiata anche alla risposta di Blizwire .

La risposta corrente (di Moshtaf) sta usando un evento click standard. Tuttavia, Bootstrap ha un evento integrato per l’apertura / chiusura di elementi collassabili, come sottolineato da Jurriaan, che è molto più sicuro da usare (un clic sul collegamento non significa necessariamente che il pannello sia mostrato). Ecco una soluzione pulita, ispirata alla soluzione di Jurriaan, con una quantità minima di codice e selettori jQuery. http://codepen.io/martinkrulltott/pen/mPgYgQ

 $(document).ready(function() { $('.panel-collapse').on('show.bs.collapse', function () { $(this).siblings('.panel-heading').addClass('active'); }); $('.panel-collapse').on('hide.bs.collapse', function () { $(this).siblings('.panel-heading').removeClass('active'); }); }); 

Queste risposte non hanno funzionato per me in alcuni casi: gruppi di pannelli multipli su 1 pagina o facendo clic sullo stesso titolo per hide un pannello. Questo adattamento da https://stackoverflow.com/a/24033761/842740 funziona come soluzione generale e ho aggiunto il codice per l’impostazione del pannello aperto predefinito sullo stato attivo.

 $('.panel-group .panel-collapse.in').prev().addClass('active'); $('.panel-group') .on('show.bs.collapse', function(e) { $(e.target).prev('.panel-heading').addClass('active'); }) .on('hide.bs.collapse', function(e) { $(e.target).prev('.panel-heading').removeClass('active'); }); 

Per qualcuno che sta cercando una soluzione CSS e mi sono stancato solo in Bootstrap 4 :

HTML

  

Date Goes Here

CSS

 [data-toggle="collapse"]:not(.collapsed) { background-color: blue; } 
 $(function() { $('.panel-heading').click(function() { if ($(this).hasClass('activestate')) { $(this).removeClass('activestate'); } else { $('.panel-heading').removeClass('activestate'); $(this).addClass('activestate'); } }); }); 
 a, a:hover, a:active, a:focus { text-decoration: none !important } .panel-heading:hover, .panel-heading:focus, .panel-heading:hover a, .panel-heading:focus a { color: #c9b27e; text-decoration: none !IMPORTANT; } .activestate { background-color: #c9b27e !IMPORTANT; color: white !important; display: block; } .activestate:hover a { color: black; } .panel-heading { display: block } 
    

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.