1

为什么下面的脚本似乎没有运行？我还想要一些关于如何调试 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>
4

3 回答 3

0

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

<script>

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

</script>
于 2013-07-07T20:07:41.553 回答
0

您的脚本在 DOM 准备好之前执行。在尝试操作它之前，您需要等到 DOM 可用。

将您的脚本更改为：

$(document).ready(function() {
    $('#clickable_div').mouseover( function(){
        $('#nav_menu').slideDown();})
    $('#wrap').mouseleave( function(){
        $('#nav_menu').slideUp();});
});
于 2013-07-07T20:11:15.417 回答
0

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

于 2013-07-07T20:15:04.197 回答