bootstrap3 fisarmonica non funziona
-
20-12-2019 - |
Domanda
Ciao che stava usando il seguente codice per visualizzare una fisarmonica da quando sono stato aggiornato a Bootstrap3 La fisarmonica non funziona più, ho provato ad aggiungere un div panel ma la fisarmonica sembra funzionare e quindi non funziona, posso aprire ogni sezioneQuando torno al primo, non viene visualizzato e nessuno degli altri viene visualizzato?
<div class="row add-top add-bottom-main">
<div class="panel accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading proxim-bg-one">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading proxim-bg-two">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading proxim-bg-three">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading proxim-bg-four">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
</div>
</div>
.
L'altro problema che ho è questa linea usata per essere nascosta
<img id="nav-arrow" class="hidden-phone hidden-tablet" src="images/nav-left.png" title="logo" alt="arrow"/>
.
Ho aggiornato il codice e ora viene visualizzato tutto il tempo?
<img id="nav-arrow" class="hidden-sm hidden-md" src="images/nav-left.png" title="logo" alt="arrow">
.
Mi manca qualcosa qui?
Grazie
m
Soluzione
In Bootstrap 3 Il markup di fisarmonica non è più supportato.
Ma puoi comunque ottenere un effetto fisarmonica utilizzando la funzionalità di collasso.C'è un esempio di fisarmonica qui.
http://getboowstrap.com/javascript/#collapse
Ecco un esempio con il tuo codice.
Per quanto riguarda il tuo ultimo problema, sembra che Bootstrap 3 abbia nuove lezioni di helper.
http://getboowstrap.com/csss/#helper-classes hidden-xs
si applica ai telefoni e ai generatori di generazione per i tablet.
Allora:
<img id="nav-arrow" class="hidden-xs hidden-sm" src="images/nav-left.png" title="logo" alt="arrow">
.