読み込みながら、jQueryのアコーディオンを隠します

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

  •  22-08-2019
  •  | 
  •  

質問

私は、低速接続でビルドサイトをテストしていると私はjQueryのアコーディオンは、サイトの残りの部分がロードされるまで、長い時間のために拡大した後、最終的には崩壊したままに気づきました。非常にきれいではありません。私はそれがロードプロセスによって崩壊し、クリックされたときにのみ拡大保つことができるかと思いまして。

私はアコーディオンプラグインのスタンドアロン1.6バージョンで働いています。

基本的な構造：

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

、スクリプト

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

のロード中に私が登場するからそれらを保つためにCSSで要素を非表示しようとしましたが、達成されたものすべてが常に隠されたそれらを有することです。

たぶん、問題は、私は、サブメニューのそれぞれに背景画像を持っているCSSであります：

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

この事は少しスムーズに実行させるとアコーディオンは常に崩壊した方法上の任意のアドバイスを事前に感謝します。

-edit - 私はまた、NAVはまだJavascriptのないもののためにアクセスできるようになります解決策を期待していますことを言及するのを忘れてしまいました。

役に立ちましたか？

解決

私はすべての私のサイトでこの最初のことを行う：右bodyタグの後に、このJavaScriptでスクリプトタグをつけます：

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

これは、あなたJavascriptが何らかの方法で異なります任意の要素のスタイルフックを与え、それがすぐに起こるます。

他の回答であなたの問題の残りの部分に優れたソリューションがあります。あなたは、ちょうど2つの「基本」スタイルの代わりの1をする必要があります：

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

...そして再オープンdom.readyにアコーディオンを適用する前に。

EDIT：あなたはページの最後にはjQueryをロードしている（またはjQueryのを使用していない）場合は、このストレートJavaScriptのバージョンを使用することができます：

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

他のヒント

私は一週間前にこの非常に問題に直面しました。私は表示されないようにコンテナを設定します。どれも、その後、それが適切な時に現れ作るためのjQueryを使用します：

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

DOMまで実行されませんjQuery.ready内部コードは（）準備ができている - それは、最終的にはしばらくの間、目に見えるとどまることを隠される要素のための通常のです。アコーディオンは、部分的に使いやすさのために、一部は優雅なdegredationのためにこのように設定されています。JavaScriptが無効になっている場合、コンテンツは、（隠された）欠落していることはありません。

あなたはJavaScriptをせずに壊れるページを危険にさらして喜んでいる場合は、

は、先に行くと、非表示にあなたの要素を設定します。その後、直前.accordion（）は、show（）、それらを。

ここでは互換性を維持する考えです。それは最小限にテストされているとコメントして開かれている。

だけで、あなたのCSSを残すが、あなたのJavaScript（の外のjQuery.ready()）の先頭にこれを追加します：

document.styleSheets[0].addRule(".yourclass", "display:none");
ページが構築されているように、

その方法は、CSSルールは、あなたの隠された要素を非表示に設定されます。その後、jQuery.ready()内、アコーディオンを初期化する前にそれらを戻すために$(".yourclass").show()を呼び出します。

あなたの.accordionを行い準備文書を待っているのではなく、単にアコーディオン要素の下の

scroll top