2013-04-22 12 views
49

Sto utilizzando il modello bootstrap e vorrei modificare il modo in cui il accordion funziona per impostazione predefinita.elemento di avvio inizialmente compresso

Come è possibile attivare la levetta quando si visualizza la pagina per la prima volta (al caricamento)?

<div class="accordion-heading"> 
    <a class="accordion-toggle" 
     data-toggle="collapse" 
     data-parent="#accordion2" 
     href="#collapseOne">Open!</a> 
</div> 
<div id="collapseOne" class="accordion-body collapse in"> 
    <div class="span6"> 
     <div class="well well-small"> 
      <div class="accordion-toggle"> 
       ...some text... 
      </div> 
     </div> 
    </div> 
    <div class="span2"></div>        
</div> 
+1

Non riesci a capire che vuoi che le fisarmoniche vengano compresse inizialmente? – PSL

+2

Sì, voglio che venga chiuso al caricamento della pagina. – JoshuaJeanThree

+6

Ok. basta rimuovere "in". Si prega di vedere le risposte ... – PSL

risposta

77

Quando si espande o comprimere a fisarmonica aggiunge solo/rimuove una classe "in" e imposta il height:auto o 0 al div fisarmonica.

Demo

Quindi nel tuo fisarmonica quando si definisce semplicemente rimuovere "in" classe dal div come di seguito. Ogni volta che espandi un accorion, aggiunge semplicemente la classe "in" per renderlo visibile.

Se si esegue il rendering della pagina con "in" bootstrap cerca la classe e si otterrà l'altezza del div: auto, se non presente sarà ad altezza zero.

<div id="collapseOne" class="accordion-body collapse"> 
32

è necessario rimuovere "in" da "crollo"

11

un'altra soluzione è aggiungere ginocchiera = false al bersaglio collasso, questo fermerà a caso di apertura e chiusura che avviene se si rimuove semplicemente il "in"

es

<div class="accordion-heading"> 
    <a class="accordion-toggle" 
     data-toggle="collapse" 
     data-parent="#accordion2" 
     href="#collapseOne">Open!</a> 
</div> 
<div 
    id="collapseOne" 
    class="accordion-body collapse" 
    data-toggle="false" 
    > 
    <div class="span6"> 
     <div class="well well-small"> 
      <div class="accordion-toggle"> 
       ...some text... 
      </div> 
     </div> 
    </div> 
    <div class="span2"></div>        
</div> 
+2

Questo mi ha aiutato molto. Ho avuto un div che dovrebbe inizialmente essere mostrato e quindi essere nascosto usando l'interruttore. Tuttavia senza i dati-toggle = "false" In primo luogo svaniva il div in (che sembrava stupido perché era già visibile) e quindi a partire dal secondo interruttore funzionava come previsto. –

+1

Ho risolto anche il mio problema, grazie. Il mio div (contenente un pulsante) è stato inizialmente collassato e sarebbe stato stranamente mostrato e nascosto nuovamente le prime due volte qualsiasi cosa nel modulo sopra di esso è stato modificato ... –

+1

Grazie! Questo ha risolto il mio problema. Non ho mai avuto il 'in' in primo luogo, ed è stato comunque ampliato inizialmente. Aggiungendo data-toggle = "false" l'ho risolto per me. –

-2

Se la rimozione della classe in non funziona per te, come nel mio caso, puoi forzare lo stato iniziale compresso utilizzando la proprietà di visualizzazione CSS:

... 
<div id="collapseOne" class="accordion-body collapse" style="display: none;"> 
... 
+1

strano vedere il bootstrap essere frainteso ... –

+0

@VishalKumarSahu A volte non è possibile controllare il contesto in cui viene implementato un codice e talvolta il client non paga per ricodificarlo o eseguirne il debug. Devi adattarti. –