JavaScript无法在鼠标悬停时运行
[英]JavaScript does not run for mouseover
问题描述
为什么下面的脚本似乎没有运行？ 我还想对如何调试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>
3 个解决方案
解决方案1
0 已采纳 2013-07-07 20:07:41
除了将HTML放入页面主体之外，您还需要等待页面准备就绪。
<script>
$(function(){
$('#clickable_div').mouseover( function(){
$('#nav_menu').slideDown();})
$('#wrap').mouseleave( function(){
$('#nav_menu').slideUp();}
);
});
</script>
解决方案2
0
在DOM准备就绪之前，您的脚本正在执行。 您需要等到DOM可用后才能尝试对其进行操作。
将脚本更改为：
$(document).ready(function() {
$('#clickable_div').mouseover( function(){
$('#nav_menu').slideDown();})
$('#wrap').mouseleave( function(){
$('#nav_menu').slideUp();});
});
解决方案3
0 2013-07-07 20:15:04
您可以使用Chrome轻松调试JavaScript代码，请参阅调试JavaScript 。
JavaScript元素在鼠标悬停时不显示
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.