ロード中にjQueryアコーディオンを非表示にする

Question

遅い接続でサイトビルドをテストしていて、残りのサイトがロードされてから最後に折りたたまれるまで、jQueryアコーディオンは長い間拡張されていることに気付きました。あまりにもかわいい。私はどのようにローディングプロセスで折り畳まれたままにしておき、クリックしたときだけ展開できるのだろうと思っていました。

私は、accordionプラグインのスタンドアロン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で要素を非表示しようとしましたが、達成されたものすべてが常にそれらを持っています隠されたこの事は少しスムーズに実行させる方法上の任意のアドバイスを事前に

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

おかげで、アコーディオンを持つ：

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

-edit - 私は、Javascriptを使用していないユーザーにもナビにアクセスできるようにするための解決策を期待しています。

Answer 1

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

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

これはあなたにいくつかで異なります任意の要素のスタイルフックを与えますJavascriptを有効にしてすぐに起こります。

その他の回答には、残りの問題の解決策があります。

...の2つの「ベース」スタイルが必要です。次に、アコーディオンをdom.readyに適用する前にもう一度開きます。

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

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

Answer 2

私はUIアコーディオンを使用していませんが、jQueryを使用してアコーディオンを構築しました。スクリプトが行う唯一のことは、アコーディオンパネルの可視性を交互にすることです。だから、ページのロード時に1枚のパネルが表示されている場合は、おそらくあなたのようなCSSルールを使用してみてください。

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

Answer 3

私は ロード中に表示されてからそれらを保つために CSSで要素を隠そうとしました達成されたすべては にあり、それらは常に隠されています。あなたはそれがCSSに隠されて作ってみるし、この実行しないのはなぜ

：。

のjQuery（ '＃ナビゲーションを'）ショー（）アコーディオン...

Answer 4

コードの内部。 DOMが準備ができるまではjQuery.ready（）は実行されません。したがって、しばらくの間可視になるように最終的に非表示になる要素は普通です。アコーディオンは、使いやすさのために部分的に、また、優雅な堕落のために部分的に設定されています。JavaScriptが無効になっていれば、コンテンツは見逃されません。

JavaScriptを使用しないでページが壊れてしまう危険がある場合は、その要素を非表示に設定してください。その後、.accordion（）の直前にshow（）を実行します。

---

これは互換性を維持するためのアイデアです。それは最小限にテストされており、コメントするために開いています。

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

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

そうすれば、ページが構築されているとして、CSSのルールが設定されますあなたの隠された要素を隠す。その後、jQuery.ready()の内部では、アコーディオンを初期化する前に$(".yourclass").show()に呼び出して戻してください。

Answer 5

<スクリプトで直接アコーディオンをバインドして、ドキュメントの準備が整うのを待つのではなく、アコーディオン要素のすぐ下に配置します。

ページが「準備完了」になるまで待つのではなく、できるだけ早くアクティブにします（これはDOMContentLoadedイベントをサポートしないIEで特に長時間かかることがあるため、jQueryが待機する必要があります） onloadは、すべてのイメージとすべてがロードされた後にのみ起動します）。

アコーディオンの親要素を 'visibility：hidden'に設定し、スクリプトの初期化時に手動で 'visible'に戻します。しかし、JavaScriptをオフにしたブラウザではコンテンツがまったく表示されないため、理想的ではありません。

Answer 6

を私は一週間前にこの非常に問題に直面しました。私は、ディスプレイへのコンテナ設定：なしにして、それが適切な時に現れ作るためのjQueryを使用：

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

Answer 7

私は多くのポータルサイト間でjQueryの要素（タブ、スライダー&アコーディオン）の数百を持っています。それぞれの非表示/表示スタイルの設定は現実的な選択肢ではありません。

jQueryが準備され、要素を構築してから本文を表示するまで、シンプルな方法で本体を非表示にします。私の主人で

body { 
    display: none; 
} 

jQuery.ready（）の下部にはJavaScriptファイル、：：1ティムが提案のように、私はCSSのソリューションを使用している

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

Answer 8

私のマスタースタイルシートで

しかし、これは、javascriptを無効にしているユーザー（またはjavascriptをサポートしていないデバイス）のコンテンツを非表示にすることを意味します。私はJerphによって提供されたソリューションを共有することに感謝します。

Answer 9

のアクセシビリティに関しては、これを使用して注意してください：

body { 
    display: none; 
} 

場合は、何も表示されませんオフになっているJavaScriptを何らかの理由;）

Answer 10

私はUIのアコーディオンを使用していないが、I jQueryでアコーディオンを構築しました。スクリプトが行う唯一のことは、アコーディオンパネルの可視性を交互にすることです。私はそれを試してみましたが、その後、サブメニューは常に隠された述べたように

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