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 mache das bei allen meinen Websites als Erstes: Direkt nach dem Body-Tag füge ich einen Script-Tag mit diesem Javascript ein:

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

Damit haben Sie einen Style-Hook für alle Elemente, die bei aktiviertem Javascript anders aussehen sollen, und das sofort.

Für den Rest Ihrer Probleme gibt es in den anderen Antworten gute Lösungen. Sie brauchen nur zwei "Basis"-Stile anstelle von einem:

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

... und dann erneut öffnen, bevor Sie das Akkordeon auf dom.ready anwenden.

EDIT: Wenn Sie jQuery am Ende der Seite laden (oder jQuery nicht verwenden), können Sie diese direkte Javascript-Version verwenden:

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

Answer 2

Vor einer Woche stand ich genau vor diesem Problem. Ich habe den Container auf display:none gesetzt und dann jQuery verwendet, um ihn zum richtigen Zeitpunkt einzublenden:

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

Answer 3

Der Code in jQuery.ready() wird erst ausgeführt, wenn das DOM bereit ist - es ist also normal, dass Elemente, die später ausgeblendet werden, eine Zeit lang sichtbar bleiben. Accordion ist auf diese Weise zum Teil für die Benutzerfreundlichkeit und zum Teil im Interesse der graceful Degression: Inhalt wird nicht fehlen (versteckt), wenn JavaScript deaktiviert ist.

Wenn Sie bereit sind, eine Seite zu riskieren, die ohne JavaScript nicht funktioniert, können Sie Ihre Elemente ausblenden. Dann, unmittelbar vor .accordion(), show() sie.

---

Hier ist eine Idee, um die Kompatibilität zu erhalten. Sie wurde minimal getestet und ist offen für Kommentare.

Lassen Sie Ihr CSS in Ruhe, aber fügen Sie dies oben in Ihr JavaScript ein ( fuera de jQuery.ready() ):

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

Auf diese Weise wird beim Aufbau der Seite eine CSS-Regel erstellt, die Ihre verborgenen Elemente ausblendet. Dann, innerhalb jQuery.ready() anrufen $(".yourclass").show() um sie vor der Initialisierung des Akkordeons zurückzuholen.

Answer 4

Führen Sie Ihre .accordion-Bindung direkt in einem <script> direkt unter den Akkordeon-Elementen durch, anstatt auf das Dokument ready zu warten.

Sie werden dann so schnell wie möglich aktiviert, anstatt zu warten, bis die Seite "bereit" ist (was besonders beim IE lange dauern kann, da dieser das Ereignis DOMContentLoaded nicht unterstützt, so dass jQuery auf onload warten muss, das erst ausgelöst wird, wenn alle Bilder und alles andere geladen sind).

Sie かもしれない das übergeordnete Element des Akkordeons auf "Sichtbarkeit: ausgeblendet" setzen und es dann bei der Initialisierung des Skripts manuell wieder auf "sichtbar" setzen. Aber dann sehen Browser mit deaktiviertem JavaScript den Inhalt überhaupt nicht, was nicht ideal ist.

Answer 5

Seien Sie vorsichtig, wenn Sie dies im Hinblick auf die Zugänglichkeit verwenden:

body {
  display: none; 
}

Wenn aus irgendeinem Grund javascript deaktiviert ist, wird nichts angezeigt ;)