javascript - 那位大神帮我看看这个jquery有没有逻辑错误
本文介绍了javascript - 那位大神帮我看看这个jquery有没有逻辑错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
这个功能执行五六次就不正常了，没有报错，请问那里的问题。
`<!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>jquery鼠标悬停滑动下拉菜单代码 - 站长素材</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
img{border:0 none;}
.box{background:#1a529c}
/*主导航菜单*/
#nav-menu{height:40px;;background:#1a529c;width:970px;margin:0 auto;}
#nav-menu .container{position:relative;overflow:visible; z-index:99;}
#nav-menu .menu{padding:0 0 0 14px;}
#nav-menu .menu li{position:relative;float:left;padding:0 8px 0 5px;display:inline;font-size:14px;}
#nav-menu .menu li h3{font-weight:normal;display:inline-block;float:left;}
#nav-menu .menu li a.xialaguang{margin-top:10px;display:inline-block;color:#FFF;height:30px;text-decoration:none;font-size:14px;width:100px;text-align:center;}
#nav-menu .menu li a.selected,#nav-menu .menu li a.navhover,#nav-menu .menu li a.xialaguang:hover{color:#1a529c;}
#nav-menu .menu li a.navhover, #nav-menu .menu li a.xialaguang:hover{background-color:#FFF;}
#nav-menu .menu li a.xialaguang span{height:30px;line-height:25px;display:inline-block;font-weight:bold;}
#nav-menu .menu li a.selected span,#nav-menu .menu li a.navhover span,#nav-menu .menu li a.xialaguang:hover span{cursor:pointer;}
#nav-menu .menu li a.navhover span, #nav-menu .menu li a.xialaguang:hover span{width:100px;}
#nav-menu .menu ul.children{display:none;position:absolute;top:40px;left:3px;width:100px;background:#FFF;border:2px solid #1a529c;border-top:0;line-height:normal;}
#nav-menu .menu ul.children li{width:100px;padding:0px;display:inline-block;font-size:12px;border-top:1px solid #ccc;}
#nav-menu .menu ul.children li h3{display:block; width:100%;}
#nav-menu .menu ul.children li a{width:100%;height:16px;line-height:16px;overflow:hidden;padding:3px 0;display:block;color:#1a529c;text-align:center;
text-decoration:none; font-size:12px;}
#nav-menu .menu ul.children li a:hover{background-color:#eee;text-decoration:none;}
</style>
</head>
<body>
<div class="box">
<div id="nav-menu">
<ul class="menu">
<li class="stmenu"><h3><a href="#" class="xialaguang"><span>网站首页</span></a></h3></li>
<li class="stmenu">
<h3><a href="#" class="xialaguang"><span>网页教程</span></a></h3>
<ul class="children">
<li><h3><a href="#"><span>基础知识</span></a></h3></li>
<li><h3><a href="#"><span>优秀教程</span></a></h3></li>
<li><h3><a href="#"><span>文字效果</span></a></h3></li>
<li><h3><a href="#"><span>按钮制作</span></a></h3></li>
</ul>
</li>
<li class="stmenu">
<h3><a href="#" class="xialaguang"><span>网页特效</span></a></h3>
<ul class="children">
<li><h3><a href="#"><span>焦点图</span></a></h3></li>
<li><h3><a href="#"><span>常用代码</span></a></h3></li>
</ul>
</li>
<li class="stmenu">
<h3><a href="#" class="xialaguang"><span>设计教程</span></a></h3>
<ul class="children">
<li><h3><a href="#"><span>Photoshop</span></a></h3></li>
<li><h3><a href="#"><span>DreamWeaver</span></a></h3></li>
<li><h3><a href="#"><span>FireWorks</span></a></h3></li>
<li><h3><a href="#"><span>Flash</span></a></h3></li>
</ul>
</li>
<li class="stmenu">
<h3><a href="#" class="xialaguang"><span>站长杂谈</span></a></h3>
<ul class="children">
<li><h3><a href="#"><span>QQ个性签名</span></a></h3></li>
<li><h3><a href="#"><span>QQ留言代码</span></a></h3></li>
</ul>
</li>
<li class="stmenu"><h3><a href="#" class="xialaguang"><span>设计欣赏</span></a></h3></li>
<li class="stmenu"><h3><a href="#" class="xialaguang"><span>素材</span></a></h3></li>
</ul>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#nav-menu .menu li>h3').hover(function(){
if($(this).next().css("display")=="none"){
$('.children').hide();
$('.xialaguang').removeClass('navhover')
}
$(this).next('.children').show();
$(this).next('.xialaguang').addClass('navhover');
});
</script>
</body>
</html>`解决方案
换一个写法，用mouseenter 和mouseleave，时间绑定在li上，这样才可以滑动到下面的框上：
$('#nav-menu .menu li').mouseenter(function(){
$(this).find('.children').show();
$(this).find('.xialaguang').addClass('navhover');
}).mouseleave(function(){
$(this).find('.children').hide();
$(this).find('.xialaguang').removeClass('navhover');
});
这篇关于javascript - 那位大神帮我看看这个jquery有没有逻辑错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
