0

我整个下午都在寻找解决方案，但我没有找到。我正在编写一个 HTML5 网页，使用 jquery 和 css。我正在尝试实现非常简单的下拉菜单（我在这里找到了教程），但它对我不起作用。我已经将此代码从本文复制粘贴到本地 html 文件并在浏览器中打开它，它工作得很好，就像我想实现菜单一样，但是当我尝试在我的网页中实现相同的代码时它不起作用。

我在控制台日志中显示了两个错误：（SyntaxError: function statement requires a name - jquery.js: row 2072）然后在这个错误之后我得到了（ReferenceError: $ is not defined - index.html row 15，其中 $出现符号）。

我一直在寻找很多，但我没有找到任何有用的东西可能对我有帮助。如果我在 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(document).ready(function($) {
        $(".dropdown").hover(function() {
            $(this).find(".sub_navigation").slideToggle();
        });
    });

试试这个看看是否有冲突或根本没有加载 jQuery。

于 2013-03-31T17:52:02.743 回答
0

我认为没有找到jquery。尝试将此添加到您的<head></head>.

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

这是谷歌托管的 jquery。如果您可以访问互联网，它至少应该解决您的第一个问题

于 2013-03-31T17:43:32.077 回答