1

私の質問が他の多くの質問と重複していることは知っていますが、私の問題を解決する答えをまだ見つけていません。複数のページでレスポンシブ メニューを使用しようとしているので、その HTML コードを別のファイルに配置しました... HTML、HEAD、BODY タグを除いたものです。これを menu.html としましょう。メニューには、index.html で参照する CSS ファイルと JS ファイルが必要です。CSS は HEAD にロードされ、JS ファイルは BODY 終了タグの直前にロードされます。メニューを表示したい場所：

<div id="topMenu"></div>
<script>$('#topMenu').load('vgg_menu.html');</script>

すべてのファイルが仮想サーバー上にあるため、ローカルでは何も実行されていません。これが奇妙なことです...メニューはIE8で素晴らしく機能します。Chrome と FireFox では、親メニュー項目が表示され、本来あるべきスタイルになっていますが、ドロップダウン/サブメニュー項目は機能しません。ただし...開発ツールパネルを開いた後、メニューは機能します。図に行く！ページを更新すると、メニューが機能しません... Dev Tool パネルを開くと、メニューが機能します。

私が言ったように、他の投稿で見つけたすべての提案を試しました。「$(document).ready(function()」を使用するかどうかは関係ありません。機能しません。メニューの CSS を動的にロードしようとしましたが、違いはありません。そうそう...いいえメニューの HTML を index.html ページに直接入力すると、すべてのブラウザーで適切に機能するため、CSS または JS ファイルのコードに問題はありません。

この .load() を Chrome で適切に動作させることができない理由は誰にもありますか? どんなガイダンスも大歓迎です。実行されませんが、コードをここに投稿しました。

4

1 に答える 1

1

あなたの場合、 jQueryload(url, complete)関数を介したAJAXリクエストは非同期です。つまり、.htmlファイルのコンテンツがdomで利用可能になるまでに時間がかかりますが、スクリプトの実行は続行されます。そして、それが問題です。ドキュメントの準備ができたらadjustMenu、要素が dom に追加される前に呼び出します。これを修正するには、完全なコールバック関数として に渡すだけadjustMenuです.load()。ajax リクエストが完了すると、完全なコールバックが呼び出されます。

$(document).ready(function() {
    $('#topMenu').load('menu.html', adjustMenu);

    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    });

    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
});

これらの調整でデモを更新しました

PS: 先ほどの不完全なコメントで申し訳ありません。コードをざっと見てみましょう...

于 2013-11-06T01:11:41.877 に答える