Hide jQuery Accordion durante il caricamento

Question

Sto testando una build di un sito con una connessione lenta e ho notato che la jQuery Accordion rimane espansa per un lungo periodo di tempo, fino a quando il resto del sito non viene caricato e infine collassa. Non molto carina. Mi chiedevo come avrei potuto mantenerlo collassato attraverso il processo di caricamento e di espandermi solo quando cliccato.

Sto lavorando con la versione standalone 1.6 del plugin per fisarmonica.

La struttura di base:

<div class="sidebar"> 
    <ul id="navigation" class="ui-accordion-container"> 
     <li><a class="head" href="#">1</a> 
      <ul class="sub"> 
       <li><a href="#">1a</a></li> 
       <li><a href="#">2a</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

e lo script

jQuery().ready(function(){ 
    jQuery('#navigation').accordion({ 
     active: 'false', 
     header: '.head', 
     navigation: true, 
     animated: 'easeslide', 
     collapsible: true 
    });  
}); 

ho cercato di nascondere gli elementi della CSS per impedire loro di apparire durante il caricamento, ma tutto quello che ottiene è di averli sempre nascosto.

Forse il problema è nel CSS ho un'immagine di sfondo in ciascuna delle sub menu:

#navigation{ 
    margin:0px; 
    margin-left: 10px; 
    padding:0px; 
    text-indent:0px; 
    font-size: 1.1em; 
    width:200px; 
    text-transform: uppercase; 
    padding-bottom: 30px; 
} 
#navigation ul{ 
    border-width:0px; 
    margin:0px; 
    padding:0px; 
    text-indent:0px; 
} 
#navigation li{ 
    list-style:none outside none; 
} 
#navigation li ul{ 
    height:185px; overflow:auto; 
} 
#navigation li ul.sub{ 
    background:url('../images/sub.jpg') no-repeat; 
    dispaly: block; 
} 
#navigation li li a{ 
    color:#000000; 
    display:block; 
    text-indent:20px; 
    text-decoration: none; 
    padding: 6px 0; 
} 
#navigation li li a:hover{ 
    background-color:#FFFF99; 
    color:#FF0000; 
} 

Grazie in anticipo per eventuali consigli su come avere questa cosa eseguire un po 'più agevole e con la fisarmonica sempre collassato.

-edit - Ho dimenticato di dire che spero anche in una soluzione che permetta al nav di essere ancora accessibile a chi non ha Javascript.

Answer 1

faccio questo prima cosa con tutti i miei siti: Subito dopo il tag body, mettere un tag script con questo javascript:

jQuery('body').addClass('js'); 

Questo vi dà un gancio stile per qualsiasi elemento che avrà un aspetto diverso in qualche modo quando Javascript è abilitato e succede immediatamente.

Ci sono buone soluzioni per il resto dei tuoi problemi nelle altre risposte. Avrete solo bisogno di due stili "base" invece di uno:

#navigation ul li { /*open styles for no javascript*/ } 
body.js #navigation ul li { /*closed styles for pre dom.ready*/ } 

... e poi riaprire prima di applicare la fisarmonica su dom.ready.

EDIT: Se si carica jQuery alla fine della pagina (o non si sta utilizzando jQuery), è possibile utilizzare questa versione javascript diritta:

<script type="text/javascript"> 
    var b = document.getElementsByTagName('body')[0]; 
    b.className+=b.className?' js':'js'; 
</script> 

Answer 2

Non ho usato la fisarmonica UI, ma ho creato fisarmoniche con jQuery. L'unica cosa che fa la sceneggiatura è alternare la visibilità dei pannelli della fisarmonica. Quindi, se un pannello è visibile quando la pagina viene caricata, allora forse si dovrebbe provare a utilizzare una regola CSS come ad esempio:

ul.sub{ 
    visiblity:hidden; 
    display:none; 
} 

Answer 3

Ho cercato di nascondere gli elementi della CSS per impedire loro di apparire mentre carico ma tutto ciò che si ottiene è in facendoli sempre nascosti.

Perché non provare a fare è nascosta nel css, e poi fare questo:..

jQuery ('# navigazione') show() fisarmonica ...

Answer 4

codice interno jQuery.ready() non viene eseguito finché il DOM non è pronto, quindi è normale che gli elementi che alla fine saranno nascosti rimangano visibili per un po '. La fisarmonica viene impostata in questo modo in parte per la facilità d'uso e in parte per una graduale degredation: il contenuto non mancherà (nascosto) se JavaScript è disabilitato.

Se sei disposto a rischiare una pagina che si interrompe senza JavaScript, vai avanti e imposta i tuoi elementi da nascondere. Quindi, immediatamente prima .accordion(), mostra() loro.

---

Ecco un'idea per mantenere la compatibilità. E 'stato minimamente testato ed è aperto a commenti.

Lascia i CSS solo, ma aggiungere questo alla parte superiore del vostro JavaScript (fuorijQuery.ready()):

document.styleSheets[0].addRule(".yourclass", "display:none"); 

In questo modo, come pagina è in costruzione, una regola CSS sarà allestito a nascondi i tuoi elementi nascosti.Quindi, all'interno di jQuery.ready(), chiamare $(".yourclass").show() per richiamarli prima di inizializzare la fisarmonica.

Answer 5

Fai il tuo .accordion binding direttamente in uno script <> appena sotto gli elementi fisarmonica invece di aspettare che il documento sia pronto.

Si attiveranno al più presto, anziché attendere che la pagina sia "pronta" (che può richiedere molto tempo soprattutto su IE, che non supporta l'evento DOMContentLoaded, quindi jQuery deve attendere onload, che si attiva solo dopo tutte le immagini e tutto viene caricato).

impostare l'elemento padre della fisarmonica su "visibilità: nascosta", quindi ripristinarlo manualmente quando lo script viene inizializzato. Ma poi i browser con JavaScript disattivato non vedranno affatto il contenuto, il che non è l'ideale.

Answer 6

Ho affrontato questo problema una settimana fa . I impostare il contenitore di visualizzazione: nessuna e poi usato jQuery per renderlo presentarsi al momento opportuno:

$(".accordion").show(); 
$(".accordion").accordion(); 

Answer 7

Ho centinaia di elementi jQuery (schede, cursori & fisarmoniche) attraverso molti siti portale. L'impostazione di stili di Nascondi/Mostra per ognuno non è un'opzione realistica.

Soluzione semplice, nascondi il corpo fino a quando jQuery è pronto e ha costruito gli elementi, quindi mostra il corpo.

Nel mio padrone foglio di stile:

body { 
    display: none; 
} 

Nel mio padrone file JavaScript, in fondo jQuery.ready():

$(document).ready(function() { 
    $("body").show(); 
} 

Answer 8

Sono stato con soluzioni CSS come quello suggerito Tim , ma questo significherebbe nascondere il contenuto per le persone con disabilitazione javascript (o dispositivi senza supporto javascript). Preferisco di gran lunga la soluzione fornita da Jerph, grazie per la condivisione.

Answer 9

fare attenzione usando questo per quanto riguarda l'accessibilità:

body { 
    display: none; 
} 

Se per qualsiasi motivo Javascript è disattivato, allora nulla sarà visualizzata;)

Answer 10

non ho usato UI fisarmonica, ma io ho costruito fisarmoniche con jQuery. L'unica cosa che fa la sceneggiatura è alternare la visibilità dei pannelli della fisarmonica. Quindi, se un pannello è visibile quando la pagina viene caricata, allora forse si dovrebbe provare a utilizzare una regola CSS come ad esempio:

ul.sub{ 
    visiblity:hidden; 
    display:none; 
}