11

接続が遅いサイト ビルドをテストしていますが、サイトの残りの部分が読み込まれるまで、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;
}

このことを少しスムーズに実行し、アコーディオンを常に折りたたむ方法についてのアドバイスを事前に感謝します.

-編集-Javascriptを使用していない人でもナビゲーションにアクセスできるようにするソリューションを期待していることを忘れていました.

4

10 に答える 10

16

私はすべてのサイトでこれを最初に行います。 body タグの直後に、次の JavaScript を使用して script タグを配置します。

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

これにより、Javascript が有効になっているときに何らかの形で異なるように見える要素のスタイル フックが提供され、それがすぐに行われます。

他の回答には、残りの問題に対する適切な解決策があります。1 つではなく 2 つの「ベース」スタイルが必要です。

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

...そして、dom.ready にアコーディオンを適用する前に再度開きます。

編集: ページの最後で jQuery をロードしている (または jQuery を使用していない) 場合は、このストレートな JavaScript バージョンを使用できます。

<script type="text/javascript">
    var b = document.getElementsByTagName('body')[0];
    b.className+=b.className?' js':'js';
</script>
于 2009-04-01T04:06:49.910 に答える
6

私は一週間前にこの問題に直面しました。コンテナーを display:none に設定し、jQuery を使用して適切なタイミングで表示されるようにしました。

$(".accordion").show();
$(".accordion").accordion();
于 2009-04-26T19:27:03.190 に答える
4

jQuery.ready() 内のコードは、DOM の準備が整うまで実行されません。そのため、最終的に非表示になる要素がしばらくの間表示されたままになるのは正常です。アコーディオンがこのように設定されているのは、一部は使いやすさのためであり、一部は適切な機能低下のためです。JavaScript が無効になっていても、コンテンツが失われる (隠される) ことはありません。

JavaScript を使用しないとページが壊れる危険を冒しても構わない場合は、要素を非表示に設定してください。次に、.accordion() の直前に、それらを show() します。

互換性を維持するためのアイデアを次に示します。最小限のテストが行​​われており、コメントを受け付けています。

CSS はそのままにして、これを JavaScript の先頭 ( outside jQuery.ready() )に追加します。

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

そうすれば、ページが構築されているときに、非表示の要素を非表示にする CSS ルールが設定されます。次に、 内jQuery.ready()で呼び出し$(".yourclass").show()て、アコーディオンを初期化する前に戻します。

于 2009-04-01T02:26:07.907 に答える
1

アクセシビリティに関してこれを使用する場合は注意してください。

body {
  display: none; 
}

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

于 2010-09-08T16:48:00.593 に答える
0

UIアコーディオンは使用していませんが、jQueryを使用してアコーディオンを作成しました。スクリプトが行う唯一のことは、アコーディオンパネルの可視性を変更することです。したがって、ページの読み込み時に1つのパネルが表示される場合は、次のようなCSSルールを使用してみてください。

ul.sub{
  visiblity:hidden;
  display:none;
}
于 2009-04-01T02:08:18.433 に答える
0

多くのポータル サイトに何百もの jQuery 要素 (タブ、スライダー、アコーディオン) があります。それぞれの非表示/表示スタイルを設定することは、現実的なオプションではありません。

簡単な解決策です。jQuery の準備が整い、要素が構築されるまで本文を非表示にしてから、本文を表示します。

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

body {
  display: none; 
}

私のマスターjavascriptファイルでは、jQuery.ready()の一番下にあります:

$(document).ready(function() { 
   $("body").show(); 
}
于 2010-06-03T15:31:42.977 に答える
0

私はティムが提案したようなcssソリューションを使用してきましたが、これらはjavascriptが無効になっている人（またはjavascriptをサポートしていないデバイス）のコンテンツを非表示にすることを意味します. 共有していただきありがとうございます。

于 2010-06-28T09:55:16.143 に答える
0

ロード中に要素が表示されないように、CSS の要素を非表示にしようとしましたが、達成されたのは、要素を常に非表示にすることだけです。

css で非表示にしてから、次のようにします。

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

于 2009-04-01T02:19:58.780 に答える