老师，关于top栏下拉菜单的三个问题，麻烦老师解答一下。谢谢老师！

来源：5-2 作业题

不安分的魔菇

2019-01-06 23:08:08

1、top下拉菜单为什么有的鼠标能移上去，有的不行。2、而且鼠标在一级菜单上时，下拉菜单会出现显示与消失交替，不停闪烁的问题。3、还有下拉菜单会导致hr横线后面部分消失。该怎么解决？

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title>
		jQuery商城
	</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body>
<!-- 顶部和logo区，背景为灰色 -->
<div class="topDiv">
	<!-- 顶部 不包含logo区-->
	<div class="top">
		<!-- 导航栏左上角 -->
		<ul class="left">
			<li style="color: red">亲，请登录</li>
			<li>免费注册</li>
			<li>手机逛慕淘</li>
		</ul>
		<!-- 导航栏右上角 -->
		<ul class="right">
			<li><div>我的慕淘<img src="images/icon/22.png"></div>
				<ul>
					<li>已买到的宝贝</li>
					<li>我的足迹</li>
				</ul>
			</li>
			<li><div>收藏夹<img src="images/icon/22.png"></div>
				<ul>
					<li>收藏的宝贝</li>
					<li>收藏的店铺</li>
				</ul>
			</li>
			<li><div>商品分类</div></li>
			<li><div>卖家中心<img src="images/icon/22.png"></div>
				<ul>
					<li>免费开店</li>
					<li>已卖出的宝贝</li>
					<li>出售中的宝贝</li>
					<li>卖家服务中心</li>
					<li>卖家培训中心</li>
					<li>体验中心</li>
				</ul>
			</li>
			<li><div>联系客服<img src="images/icon/22.png"></div>
				<ul>
					<li>消费者客服</li>
					<li>卖家客服</li>
				</ul>
			</li>
		</ul>
		<div class="clearFloat"></div>	
	</div>
	<!-- logo区 -->
	<div class="logo">
		<hr />
	</div>
</div><!-- topDiv END -->

<!-- 导航区 -->
<div style="background-color: #07111b"></div>

<!-- banner -->
<div></div>
<!-- 楼层区 -->
<div></div>
<!-- 友情链接 -->
<div></div>
<!-- 页脚 -->
<div></div>
<script src="js/jQuery.js"></script>
</body>
</html>

style.css文件代码:

*{
	margin: 0;
	padding: 0;
}
li{
	list-style-type: none;
}
.clearFloat{
	clear: both;
}
/*顶部左上角left li的样式*/
.topDiv{
	/*background-color: #f3f5f7;*/
	background-color: #d2dbe4;
	width: 100%;
	height: 100px;
}
.top{
	width: 70%;
	min-width: 700px;
	height: 30px;
	margin: 0 auto;
	font-family: "微软雅黑";
	font-size: 12px;
	color: #333;
	line-height: 30px;
}
.top .left li{
	float: left;
	display: inline-block;
	padding-right: 20px;
}
/*顶部右上角right li的样式*/
.top .right{
	float: right;
	/*z-index: 0;*/
}
.top .right > li{
	/*width: 80px;*/
	float: left;
	display: inline-block;
	padding:0 5px;
}
.top .right > li ul{
	display: none;
}
/*hover后的样式*/
.top .left li:hover,
.top .right div:hover{
	color: red;
	display: inline-block;
	line-height: 100%;
}

.top .right > li:hover{
	background-color: #fff;
/*	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;*/
	/*z-index: 4;*/
}
.top li{
	cursor: pointer;
}

/*logo样式*/
.logo{
	width: 70%;
	height: 80px;
	background-color: yellow;
	margin: 0 auto;
}
/*hr{
	z-index: 2;
}*/

jQuery.js文件代码：

$(document).ready(function(){
	topSlide();

});

function topSlide(){
	//头部下拉菜单事件绑定
	var index;
	$('.right div').each(function(index){
		$(this).hover(function(){
			$('.right > li').eq(index).find('ul').css('display','block');
		});
		$(this).mouseout(function(){
			$('.right > li').eq(index).find('ul').css('display','none');
		});
	});
	//下拉隐藏菜单上移进移出
	$('.right ul').each(function(index){
		$(this).hover(function(){
			$('.right > li').eq(index).find('ul').css('display','block');
		});
	});
	$('.right ul').each(function(index){
		$(this).mouseout(function(){
			$('.right > li').eq(index).find('ul').css('display','none');
		});
	});

}

写回答

1回答

好帮手慕夭夭

2019-01-07

你好同学 , 第一个问题是因为你把下拉菜单的显示隐藏放在了一级菜单的div中 , 当鼠标移出一级菜单的 , 就会触发下拉菜单隐藏 . 所以你移入下拉菜单的时候 ,下拉菜单会隐藏 . 第一个移入到下拉菜单的时候不隐藏 ,是因为js代码中把hover事件写在了each遍历里面 , 当页面打开的时候 , each很快就能执行完毕 ,而当你鼠标移入到菜单触发hover事件的时候 , index永远等于0 , 可以自己输出index测试一下 :