jQuery Accordion beim Laden ausblenden

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

  •  22-08-2019
  •  | 
  •  

Frage

Ich teste einen Site-Build mit einer langsamen Verbindung und habe festgestellt, dass das jQuery-Akkordeon lange Zeit expandiert bleibt, bis der Rest der Site geladen ist, und dann schließlich zusammenbricht.Nicht sehr hübsch.Ich habe mich gefragt, wie ich es während des Ladevorgangs minimiert halten und erst dann erweitern kann, wenn darauf geklickt wird.

Ich arbeite mit der Standalone-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 Drehbuch

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

Ich habe versucht, die Elemente im CSS auszublenden, damit sie beim Laden nicht angezeigt werden, aber das einzige, was ich erreicht habe, ist, dass sie immer ausgeblendet sind.

Möglicherweise liegt das Problem im CSS. Ich habe in jedem Untermenü ein Hintergrundbild:

#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 man dafür sorgen kann, dass das Ding etwas ruhiger läuft und das Akkordeon immer zusammenfällt.

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

War es hilfreich?

Lösung

Ich mache das erste, was mit all meinen Seiten: Gleich nach dem Body-Tag, setzen Sie einen Script-Tag mit diesem javascript: 

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

Dies gibt Ihnen einen Stil Haken für alle Elemente, die in irgendeiner Weise anders aussehen, wenn Javascript aktiviert ist, und es geschieht sofort.

Es gibt gute Lösungen für den Rest Ihrer Probleme in den anderen Antworten. Sie müssen nur müssen zwei „Basis“ Stile statt eines: 

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

... und dann wieder öffnen, bevor das Akkordeon auf dom.ready Anwendung.

EDIT: Wenn Sie jQuery am Ende der Seite sind geladen (oder verwenden jQuery nicht), können Sie diese gerade JavaScript-Version verwenden: 

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

Andere Tipps

ich konfrontiert genau dieses Problem vor einer Woche. Ich stellte den Behälter anzuzeigen: keine und dann verwendet jQuery es zu gegebener Zeit zeigen, bis zu machen: 

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

Code in jQuery.ready () nicht bis zum DOM laufen bereit ist - so ist es normal für Elemente, die schließlich ausgeblendet wird für eine Weile sichtbar zu bleiben. Akkordeon wird auf diese Weise zum Teil für einfache Bedienung eingerichtet und zum Teil aus Gründen der anmutigen degredation. Inhalt wird nicht fehlen (verdeckt), wenn JavaScript deaktiviert ist

Wenn Sie bereit sind, eine Seite zu riskieren, die ohne JavaScript bricht, gehen Sie vor und stellen Sie Ihre Elemente ausgeblendet werden. Dann unmittelbar vor .accordion () show () sie.

Hier ist eine Idee, um die Kompatibilität beizubehalten. Es wurde minimal getestet und ist offen Stellung zu nehmen.

Lassen Sie Ihr CSS allein, sondern fügen Sie diese oben in Ihrem JavaScript ( außerhalb jQuery.ready()): 

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

Auf diese Weise, da die Seite so konstruiert ist, wird eine CSS-Regel eingerichtet werden, um Ihre verborgenen Elemente auszublenden. Dann innen jQuery.ready(), $(".yourclass").show() nennen sie vor der Initialisierung des Akkordeons zu bringen.

Haben Ihre .accordion Bindung direkt in einem

scroll top