Cacher jQuery accordéon lors du chargement

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

  •  22-08-2019
  •  | 
  •  

Question

Je teste un site construit avec une connexion lente et j'ai remarqué le reste Accordéon jQuery étendu pendant longtemps, jusqu'à ce que le reste du site est chargé, puis finalement s'effondre. Pas très joli. Je me demandais comment je pouvais le garder effondré à travers le processus de chargement et ne se développera lorsque vous cliquez dessus.

Je travaille avec la version 1.6 autonome du plugin accordéon.

La structure de 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>

et le script 

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

J'ai essayé de cacher les éléments du CSS pour les empêcher de paraître pendant le chargement, mais tout ce qui est réalisé dans les avoir toujours caché.

Peut-être que le problème est dans le CSS j'ai une image de fond dans chacun des sous-menus: 

#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;
}

Merci à l'avance pour des conseils sur la façon d'avoir cette chose courir un peu plus lisse et ayant l'accordéon toujours effondré.

-edit - j'oublié de mentionner que je suis aussi l'espoir d'une solution qui permettra à la navigation d'être toujours accessible pour les personnes sans Javascript.

Était-ce utile?

La solution

Je fais cette première chose avec tous mes sites: Juste après la balise body, mettre un script avec ce javascript: 

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

Cela vous donne un crochet de style pour tous les éléments qui seront différents d'une certaine façon quand Javascript, et il arrive immédiatement.

Il y a de bonnes solutions pour le reste de vos problèmes dans les autres réponses. Vous aurez juste besoin de deux styles « de base » au lieu d'un: 

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

... et puis rouvrez avant d'appliquer l'accordéon sur dom.ready.

EDIT: Si vous chargez jQuery à la fin de la page (ou ne sont pas en utilisant jQuery), vous pouvez utiliser cette version javascript droit: 

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

Autres conseils

Je fait face à ce problème très il y a une semaine. Je mis le conteneur pour afficher: aucun, puis utilisé jQuery pour faire apparaître au moment opportun: 

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

Code de l'intérieur jQuery.ready () ne fonctionne pas jusqu'à ce que le DOM est prêt - il est donc normal que les éléments qui seront éventuellement cachés pour rester visible pendant un certain temps. Accordéon est mis en place ainsi en partie pour la facilité d'utilisation et en partie à cause de degredation gracieuse. Contenu ne sera pas absent (caché) si JavaScript est désactivé

Si vous êtes prêt à risquer une page qui brise sans JavaScript, aller de l'avant et définir vos éléments à masquer. Puis, immédiatement avant .Accordion (), spectacle () eux.

Voici une idée de maintenir la compatibilité. Il a été peu testé et est ouvert à tout commentaire.

Laissez vos CSS seul, mais ajouter à la partie supérieure de votre JavaScript ( en dehors jQuery.ready()): 

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

De cette façon, que la page est en cours de construction, une règle CSS sera mis en place pour cacher vos éléments cachés. Puis, à l'intérieur jQuery.ready(), appelez $(".yourclass").show() pour les ramener avant d'initialiser l'accordéon.

Faites vos .Accordion liant directement dans un

scroll top