0

@IlanBialaによって書かれたこのフィドルをテストしています

jsfiddleで確認できるように、 jquery 1.9.0、onDomReady、およびNormalizedcssを使用してメニューにサブメニューを追加します。たとえば、htmlは次のとおりです。

<nav>
    <ul>
        <li><a href="#" >Sec1</a></li>
        <li><a href="#" >Sec2</a></li>
        <li><a href="#" class="current">Sec3</a></li>
        <li><a href="contacto.html" >Sec4</a></li>
        <ul class="menu">
            <li><a href="#" class="documents" data-icon="&#xe000">Documents</a></li>
            <br>
            <li><a href="#" class="messages" data-icon="&#xe001">Messages</a></li>
            <br>
            <li><a href="#" class="signout" data-icon="&#xe002">Sign Out</a></li>
        </ul>
    </ul>
</nav>

結果は次のとおりです。

ここに画像の説明を入力してください

しかし、問題があります。アクセスできるサーバーにコードを追加し、次の行を追加しました。

<link rel="stylesheet" type="text/css" href="css/menu.css"  />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

jsfiddleでそれらをエミュレートします。htmlは次のとおりです。

 <!doctype html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="css/menu.css"  />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<nav>
    <ul>
        <li><a href="#" >Sec1</a></li>
        <li><a href="#" >Sec2</a></li>
        <li><a href="#" class="current">Sec3</a></li>
        <li><a href="contacto.html" >Sec4</a></li>
        <ul class="menu">
            <li><a href="#" class="documents" data-icon="&#xe000">Documents</a></li>
            <br>
            <li><a href="#" class="messages" data-icon="&#xe001">Messages</a></li>
            <br>
            <li><a href="#" class="signout" data-icon="&#xe002">Sign Out</a></li>
        </ul>
    </ul>
</nav>
</body>
</html>

サブメニューが機能していないことがわかるように、グリッチの原因は何でしょうか。

私はさまざまな問題を疑っています：

  1. たぶん、コードをラップしてonDomReadyウィンドウイベントで実行されるようにするonDomReadyプロパティの場合、コードでそれを示すにはどうすればよいですか？

    $（document）.ready（function（）{// menu.jsにすべてのJSコードを追加}）;

  2. 正規化されたcssですが、リセットを行うと思われます。

  3. jquery 1.9.0に問題があります。おそらく、jsを使用する順序が配置されます...

どう思いますか？

4

2 に答える 2

2

はい、あなたは正しいです。

onDomReadycodeは次のとおりです。

$(document).ready(function(){
//your code
})

jsfiddleのイベントをbodywrapに変更したかのように、機能しません。

于 2013-01-20T17:41:43.677 に答える
1

あなたが望むもので動作するように変更された同じフィドルをここで見てください：JSフィドルリンク

あなたが投稿したのとまったく同じフィドルで、onDomReadyが「 nowrap （head）」に設定され、JavaScriptコードがready関数でラップされています。これにより、投稿したHTMLで機能するようになります。 

// jQuery(document).ready(function($) {
jQuery(function($) {
 ....
 // your code
});

したがって、答えとして、ドキュメントheadのタグにjQueryをロードする場合は、jQueryのAPIを使用し、すべてのコードをラップしてDOM操作を行う必要があります。html.ready()ready function

于 2013-01-20T18:13:35.523 に答える