jQuery-Akkordeon beim Laden ausblenden

Question

Ich teste eine Website bauen mit einer langsamen Verbindung und ich bemerkte die jQuery Accordion bleibt für eine lange Zeit erweitert, bis der Rest der Website geladen wird, und dann schließlich kollabiert. Nicht sehr schön. Ich habe mich gefragt, wie ich es durch den Ladevorgang kollabiert halten könnte und nur erweitern, wenn geklickt.

Ich arbeite mit der eigenständigen Version 1.6 des Akkordeon-Plugins.

Die Grundstruktur :

<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>

und das Skript

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

Ich habe versucht, die Elemente im CSS auszublenden, um zu verhindern, dass sie beim Laden angezeigt werden, aber das hat nur dazu geführt, dass sie immer ausgeblendet sind.

Vielleicht liegt das Problem darin, dass ich in den CSS ein Hintergrundbild in jedem Untermenü habe:

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

Vielen Dank im Voraus für jeden Rat, wie diese Sache ein wenig glatter laufen und mit dem Akkordeon immer kollabiert.

-Edit - Ich habe vergessen zu erwähnen, dass ich auch auf eine Lösung hoffe, die es ermöglicht, dass die Navigation auch für Menschen ohne Javascript zugänglich ist.

Answer 1

Ich habe nicht UI Akkordeon verwendet, aber ich habe Akkordeons mit jQuery gebaut. Das Einzige, was das Skript tut, ist, die Sichtbarkeit der Akkordeon-Panels zu wechseln. Wenn also ein Bereich sichtbar ist, wenn die Seite geladen wird, dann sollten Sie vielleicht versuchen, eine CSS-Regel wie die folgende zu verwenden:

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

Answer 2

Ich habe versucht, die Elemente in der CSS zu verstecken, damit sie beim Laden nicht erscheinen Laden zu verhindern, aber alles, was ich erreicht habe, ist in dass sie immer ausgeblendet sind.

Warum versuchst du nicht, es in der CSS auszublenden, und tust dann dies:

jQuery('#navigation').show().accordian...

Answer 3

Ich habe Hunderte von jQuery-Elementen (Registerkarten, Schieberegler und Akkordeons) auf vielen Portalseiten. Einstellung ausblenden/anzeigen Stile für jedes ist nicht eine realistische Option.

Einfache Lösung: Verstecken Sie den Körper, bis jQuery bereit ist und die Elemente aufgebaut hat, und zeigen Sie dann den Körper.

In meinem Master-Stylesheet:

body {
  display: none; 
}

In meiner Master-Javascript-Datei, am Ende von jQuery.ready():

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

Answer 4

Ich habe css-Lösungen wie die von Tim vorgeschlagene verwendet, aber diese würden bedeuten, dass der Inhalt für Leute mit deaktiviertem Javascript (oder Geräte ohne Javascript-Unterstützung) ausgeblendet wird. Ich bevorzuge die Lösung von Jerph zur Verfügung gestellt, vielen Dank für die gemeinsame Nutzung.

Answer 5

Ich habe nicht UI Akkordeon verwendet, aber ich habe Akkordeons mit jQuery gebaut. Das Einzige, was das Skript tut, ist, die Sichtbarkeit der Akkordeon-Panels zu wechseln. Wenn also ein Bereich sichtbar ist, wenn die Seite geladen wird, dann sollten Sie vielleicht versuchen, eine CSS-Regel wie die folgende zu verwenden:

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