0

午後中ずっと解決策を探していましたが、見つかりませんでした。jquery と css を使用して HTML5 Web ページを作成しています。非常に単純なドロップダウン メニューを実装しようとしています (ここでチュートリアルを見つけました) が、うまくいきません。このコードをこの記事からローカルの html ファイルにコピー ペーストしてブラウザで開くと、メニューを実装したいのと同じようにうまく機能しますが、Web ページに同じコードを実装しようとすると機能しません。

コンソール ログに次の 2 つのエラーが表示されます。サインが発生します）。

私はたくさん検索してきましたが、私を助けるかもしれない有用なものは何も見つかりませんでした. jqueryスクリプトの宣言に問題がないか何度も確認しましたが大丈夫です。この単純なコードが私のアプリケーションで機能しない理由はわかりませんが、外部コードでは問題なく機能します。スクリプトタグに言語とテキストタイプを挿入しようとしましたが、スクリプトタグを空のままにしても機能しませんでした。最新の Mozilla Firefox ブラウザを使用しています。

ここに私のアプリケーションコードがあります:

    <!DOCTYPE html>
<html>
<head>
    <title>Test title</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css">
    <link rel="stylesheet" type="text/css" href="css/skin/default.css">

    <script src="script/jquery.js" type="text/javascript"></script>
    <script src="script/video.js" type="text/javascript"></script>
    <script src="script/picture.js" type="text/javascript"></script>
    <script src="script/ApplicationController.js" type="text/javascript"></script>

    <script>
        $("body").ready(function() {
            $(".dropdown").hover(function() {
                $(this).find(".sub_navigation").slideToggle();
            });
        });
    </script>
</head>
<body onload="onApplicationLoad()">
    <div id="header">
        <a href="http://www.notreallink.fail/" target="_blank"><img id="logo" src="images/logo.png"  alt="Logo" width="200" height="38" /></a>
        <div id="verticalHeaderLine"></div>

        <div id="headerMenu">            
            <ul id="navigation">
                <li class="dropdown"> <button id="Login" class="button" title="Edit Login">Login</button>
                    <ul class="sub_navigation">
                        <li><button id="test" class="button" title="Edit Test">Test</button></li>
                        <li><button id="test1" class="button" title="Edit Test">Test 1</button></li>
                        <li><button id="test2" class="button" title="Edit Test">Test 2</button></li>
                    </ul>
                </li>
            </ul>

        </div>
    </div>
</body>
</html>

これは、メニューに関連する css です。

ul {
    margin:0;
    padding:0;
    list-style-type:none;
    min-width:200px;
}

ul#navigation {
    float:left;
}

ul#navigation li {
    float:left;
    min-width:200px;
}

ul.sub_navigation {
    position:absolute;
    display:none;
}

ul.sub_navigation li {
    clear:both;
}

誰かが私が何を間違っているかを知っていて、彼がとても親切で、私が何を間違っているか教えてくれたら、とても嬉しいです.

よろしく、 ダハッカ

4

3 に答える 3

4

$("body").ready(function() {$(document).ready(function() {

通常は、Google に jQuery をホストさせた方がよいでしょう。完全な説明については、http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/を参照してください。jQueryへの参照を次のように置き換えます

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

また、ドキュメントの最後に、<body><html>代わりに</body></html>

于 2013-03-31T17:39:12.647 に答える
0

jqueryが見つからないと思います。これをあなたのに追加してみてください<head></head>。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

これはGoogleがホストするjqueryです。インターネットにアクセスできる場合、少なくとも最初の問題は解決するはずです

于 2013-03-31T17:43:32.077 に答える
0 
    jQuery(document).ready(function($) {
        $(".dropdown").hover(function() {
            $(this).find(".sub_navigation").slideToggle();
        });
    });

これを試して、競合があるかどうか、または jQuery がまったく読み込まれていないかどうかを確認してください。

于 2013-03-31T17:52:02.743 に答える