Pulsante Bootstrap Accordion per far sì che “data-parent” non funzioni

Sto cercando di creare una fisarmonica usando Bootstrap 3 usando il pulsante pieghevole con l’attributo data, senza il markup della fisarmonica. Mi sembra più pulito.

Tuttavia non riesco a far funzionare l’attributo genitore dei dati . Voglio quando apro una domanda, tutti gli altri per chiudere. Sto leggendo i documenti ( http://getbootstrap.com/javascript/#collapse-usage ) ma non riesco ancora a farlo funzionare.

Sto usando il seguente codice:

Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.

Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.

Ecco il JSFiddle: http://jsfiddle.net/twinsen/AEew4/

Sarò molto felice se qualcuno mi indicherà dove sto facendo un errore: \

Bootstrap 4

Utilizza l’attributo data-parent="" sull’elemento collapse (anziché l’elemento trigger)

 
Collapsible #1 element
... (more cards/collapsibles inside #accordion parent)

Bootstrap 3

Vedi questo problema su GitHub: https://github.com/twbs/bootstrap/issues/10966

C’è un “bug” che rende la fisarmonica dipendente dalla class .panel quando si usa l’attributo data-parent . Per risolvere il problema, puoi avvolgere ciascun gruppo di fisarmoniche in un div “pannello”.

http://bootply.com/88288

 
..
..
...

modificare

Come menzionato nei commenti, ogni sezione non deve essere un .panel . Però…

  • .panel deve essere un figlio diretto dell’elemento usato come data-parent=
  • ogni sezione di fisarmonica ( data-toggle= ) deve essere un figlio diretto di .panel ( http://www.bootply.com/AbiRW7BdD6# )

Nota, non solo c’è dipendenza su .panel, ha anche dipendenza dalla struttura DOM.

Assicurati che i tuoi elementi siano strutturati in questo modo:

  
Control
...

Fondamentalmente è quello che ha detto @Blazemonger, ma penso che anche la gerarchia dell’elemento objective sia importante. Non ho finito di provare ogni possibilità, ma fondamentalmente dovrebbe funzionare se segui questa gerarchia.

A proposito, ho avuto più livelli tra il div di controllo e il contenuto div e quello non ha funzionato.

Prova questo. Soluzione semplice senza dipendenze.

 $('[data-toggle="collapse"]').click(function() { $('.collapse.in').collapse('hide') }); 

Come diceva Blazemonger, #parent, .panel e .collapse devono essere discendenti diretti. Tuttavia, se non puoi modificare il tuo html, puoi risolvere il problema usando gli eventi bootstrap ei metodi con il seguente codice:

 $('#your-parent .collapse').on('show.bs.collapse', function (e) { var actives = $('#your-parent').find('.in, .collapsing'); actives.each( function (index, element) { $(element).collapse('hide'); }) }) 

Se trovato questa modifica alla risposta di Krzysztof ha aiutato il mio problema

 $('#' + parentId + ' .collapse').on('show.bs.collapse', function (e) { var all = $('#' + parentId).find('.collapse'); var actives = $('#' + parentId).find('.in, .collapsing'); all.each(function (index, element) { $(element).collapse('hide'); }) actives.each(function (index, element) { $(element).collapse('show'); }) }) 

se hai pannelli nidificati, potresti anche dover specificare quelli aggiungendo un altro nome di class per distinguerli e aggiungerlo al selettore a nel JavaScript sopra

Ho avuto lo stesso problema quando ho triggersto la fisarmonica. Ma quando provo a mettere il blocco di script nel blocco di intestazione, funziona per il mio caso !!

  ...     

Ecco una patch (auspicabilmente) universale che ho sviluppato per risolvere questo problema per BootStrap V3. Nessun requisito speciale se non quello di colbind lo script.

 $(':not(.panel) > [data-toggle="collapse"][data-parent]').click(function() { var parent = $(this).data('parent'); var items = $('[data-toggle="collapse"][data-parent="' + parent + '"]').not(this); items.each(function() { var target = $(this).data('target') || '#' + $(this).prop('href').split('#')[1]; $(target).filter('.in').collapse('hide'); }); });