JavaScript不能运行鼠标悬停

2013-07-07 59 views 1 likes

为什么下面的脚本似乎不运行？我还想就如何调试JavaScript提供一些建议。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>

来源

2013-07-07 user2558713

回答

除了将HTML放在页面正文中，您需要等待页面准备就绪。

<script> 

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

</script>

来源

2013-07-07 20:07:41

谢谢..它现在有效。 – user2558713

@ user2558713至于如何调试Javascript，使用安装了firebug插件的Firefox！ –

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

你的脚本改为：

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

来源

2013-07-07 20:11:15

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

来源

2013-07-07 20:15:04 Sharpless512

JavaScript不能运行鼠标悬停

回答

相关问题