Hide jQuery Accordion durante il caricamento

StackOverflow https://stackoverflow.com/questions/703783

  •  22-08-2019
  •  | 
  •  

Domanda

sto testando un sito costruito con una connessione lenta e ho notato il jQuery Accordion rimane espansa per lungo tempo, fino a quando viene caricato il resto del sito, e poi finalmente crolla. Non molto carina. Mi chiedevo come avrei potuto tenerlo crollato attraverso il processo di caricamento ed espandere solo quando si fa clic.

Sto lavorando con la standalone 1.6 versione del plugin 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 nascosti.

Forse il problema è nel CSS ho un'immagine di sfondo in ciascuno dei sottomenu: 

#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 avendo la fisarmonica sempre crollata.

-edit - Ho dimenticato di dire che io sono anche la speranza di una soluzione che permetterà al navigatore di essere ancora accessibili per chi non ha Javascript.

È stato utile?

Soluzione

Lo faccio 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 vostri 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 sta caricando 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>

Altri suggerimenti

Ho affrontato questo problema una settimana fa. Ho impostato il contenitore per visualizzare: nessuno e poi usato jQuery per renderlo presentarsi al momento opportuno: 

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

Codice all'interno jQuery.ready () non funziona fino a quando il DOM è pronto - quindi è normale per gli elementi che saranno eventualmente nascoste di rimanere visibili per un po '. Accordion è impostato in questo modo un po 'per la facilità d'uso e in parte per il bene della degradazione aggraziata:. Contenuto non mancherà (nascosto) se JavaScript è disabilitato

Se siete disposti a rischiare una pagina che si rompe senza JavaScript, andare avanti e impostare gli elementi per essere nascosto. Poi, subito prima .accordion (), show () di loro.

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

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

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

In questo modo, come pagina è in costruzione, una regola CSS sarà allestito per nascondere gli elementi nascosti. Poi, all'interno jQuery.ready(), chiamare $(".yourclass").show() per riportarli prima di inizializzare la fisarmonica.

Fate il vostro .accordion legandosi direttamente in un

scroll top