JavaScript不为mouseover运行

JavaScript does not run for mouseover

本文关键字：运行 mouseover 不为 JavaScript 更新时间：2023-09-26

为什么下面的脚本似乎没有运行？我还想要一些关于如何调试JavaScript的建议。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <style type="text/css">
            #clickable_div {
                width:100px;
                height:50px;
                background-color:#9c9c9c;
            }
            * {
                margin:0;
                padding:0
            }
            #nav_menu {
                width:100px;
                height:auto;
                background-color:#CCC;
                display:none;
            }
            #wrap {
                width:100px
             }
        </style>
        <script src="js/jquery.js"></script>
        <SCRIPT LANGUAGE="JAVASCRIPT">
            $('#clickable_div').mouseover( function(){
                $('#nav_menu').slideDown();})
            $('#wrap').mouseleave( function(){
                $('#nav_menu').slideUp();});
        </script>
        <div id='wrap'>
            <div id="clickable_div">MENU</div>
                <div id="nav_menu">
                    <ul>
                        <li id="l1">AAAAA</li>
                        <li>BBBBB</li>
                        <li>CCCCC</li>
                        <li>DDDDD</li>
                     </ul>
                </div>
            </div>
        </div>
    </head>
    <body>
    </body>
</html>

除了将HTML放入页面正文之外，还需要等待页面准备就绪。

<script>
$(function(){
    $('#clickable_div').mouseover( function(){
         $('#nav_menu').slideDown();})
         $('#wrap').mouseleave( function(){
         $('#nav_menu').slideUp();}
    );
});
</script>

您的脚本在DOM准备好之前就已经执行了。在尝试操作DOM之前，您需要等待DOM可用

将脚本更改为：

$(document).ready(function() {
    $('#clickable_div').mouseover( function(){
        $('#nav_menu').slideDown();})
    $('#wrap').mouseleave( function(){
        $('#nav_menu').slideUp();});
});

您可以使用Chrome轻松调试JavaScript代码，请参阅调试JavaScript。