Javascript jQuery可以在JSFIDLE中工作，但不能在html文件中工作？_Javascript_Jquery_Html

Javascript jQuery可以在JSFIDLE中工作，但不能在html文件中工作？

javascript jquery html

Javascript jQuery可以在JSFIDLE中工作，但不能在html文件中工作？,javascript,jquery,html,Javascript,Jquery,Html,我检查了很多次，但是我不知道为什么jQuery不能工作。它在JSFIDLE中工作 html: jquery： $('#menu').hover(function(){ $("#menu").stop().animate({width : "300px"}); }); 您需要将jquery代码包装在$function{}中，或者首选将代码移到前面。您需要将jquery代码包装在$function{}中，或者首选将代码移到前面。问题似乎出在这里： <script src="anim

我检查了很多次，但是我不知道为什么jQuery不能工作。它在JSFIDLE中工作

html:

jquery：

$('#menu').hover(function(){
     $("#menu").stop().animate({width : "300px"});
});

您需要将jquery代码包装在$function{}中，或者首选将代码移到前面。

问题似乎出在这里：

<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

您的animate.js在jquery加载之前运行

问题似乎就在这里：

<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

你的animate.js在jquery加载之前运行

，因为其他答案似乎不适合你，我想尝试一下一个建议

我猜您正在一个位置初始化JavaScript，而您添加事件侦听器的元素还不可用。这里有一个解决这个问题的办法

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Josue Espinosa</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="animate.js"></script>
</head>
<body>
    <div id="menu">
    </div>
    <script type="text/javascript">
        $('#menu').hover(function () {
            $("#menu").stop().animate({ width: "300px" });
        });
    </script>
</body>
</html>

在本例中，JavaScript位于要向其中添加侦听器的元素的正下方，因此它保证在DOM中可用

或者，您可以在文档准备好后围绕要触发的事件包装JS。以下是一个例子：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Josue Espinosa</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="animate.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#menu').hover(function () {
                $("#menu").stop().animate({ width: "300px" });
            });
        });
    </script>
</head>
<body>
    <div id="menu">
    </div>
</body>
</html>

注意JavaScript元素的顺序也很重要。

由于其他答案似乎不适合您，我将尝试一个建议

我猜您正在一个位置初始化JavaScript，而您添加事件侦听器的元素还不可用。这里有一个解决这个问题的办法

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Josue Espinosa</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="animate.js"></script>
</head>
<body>
    <div id="menu">
    </div>
    <script type="text/javascript">
        $('#menu').hover(function () {
            $("#menu").stop().animate({ width: "300px" });
        });
    </script>
</body>
</html>

在本例中，JavaScript位于要向其中添加侦听器的元素的正下方，因此它保证在DOM中可用

或者，您可以在文档准备好后围绕要触发的事件包装JS。以下是一个例子：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Josue Espinosa</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="animate.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#menu').hover(function () {
                $("#menu").stop().animate({ width: "300px" });
            });
        });
    </script>
</head>
<body>
    <div id="menu">
    </div>
</body>
</html>

注意JavaScript元素的顺序也很重要。

你能不能也提供HTML文件中的内容？你能不能也提供HTML文件中的内容？我把它放在内部的前面，但当它是外部的时候，它就不起作用了。是的，我刚刚注意到，您似乎没有使用ready函数，并且您的代码在菜单可用之前启动。当我将其放在菜单的正前方时，它会起作用，但当它是外部时，它不会起作用。是的，我注意到，您似乎没有使用ready函数，并且您的代码在菜单可用之前启动。