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

DOM の準備が整う前にスクリプトが実行されています。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 に答える
0

ページの本文に HTML を配置するだけでなく、ページの準備が整うまで待つ必要があります。

<script>

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

</script>
于 2013-07-07T20:07:41.553 に答える