1. 首頁
  2. 問答
  3. JavaScript不能運行鼠標懸停

JavaScript不能運行鼠標懸停

2013-07-07 109 views
1

爲什麼下面的腳本似乎不運行？我還想就如何調試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

回答

0

除了將HTML放在頁面正文中，您需要等待頁面準備就緒。

<script> 

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

</script>

來源

2013-07-07 20:07:41

+0

謝謝..它現在有效。 – user2558713

+0

@ user2558713至於如何調試Javascript，使用安裝了firebug插件的Firefox！ –

0

您的腳本在DOM準備好之前正在執行。在嘗試操縱它之前，您需要等到DOM可用。

你的腳本改爲：

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

來源

2013-07-07 20:11:15

相關問題

 相關問題