终于自己写了一个简单的div二级菜单

最新推荐文章于 2022-05-01 13:20:46 发布

lzjqq

最新推荐文章于 2022-05-01 13:20:46 发布

阅读量362

点赞数

分类专栏：前台页面文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/lzjqq/article/details/84491225

版权

前台页面专栏收录该内容

0 篇文章 0 订阅

订阅专栏

用别人的菜单实现修改起来总是觉得麻烦，终于自己写了一个，关于mouseleave 和mouseout的问题到快放弃的时候才在网上找到问题的原因。

<!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">
<html>
 <head>
	<meta charset="UTF-8">
	<title></title>
	 
	<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
	<script type="text/javascript">

	$(function(){			  
		$("#menu>div>div:first-child").each(function(){
			$(this).next().addClass("subMenu").hide();
			$(this).bind("mouseover", function(){
				$(".subMenu").hide();
				$(this).next().show();
			});
		});	 

		$(".subMenu").each(function(){			 
			$(this).bind("mouseleave click", function(){				 
				$(this).hide();
			});	 
		});	 
	 });
  
  </script>
  	<style type="text/css">
		#menu>div{
			width:100px;
			float:left;
			background: lightblue;
			border: 0px solid red;
			margin-right:5px
		}
		 
		.subMenu{
			padding:0px
		}
		.subMenu div:hover{
			background: lightgreen;
			cursor:pointer
		}
	</style>
 </head>
 <body> 
<div id="menu"> 
	<div>
		<div>菜单1</div>
		<div>
			<div>菜单1-1</div>
			<div>菜单1-2</div>
			<div>菜单1-3</div>			
		</div>
	</div>
	<div>
		<div>菜单2</div>
		<div>
			<div>菜单1-1</div>
			<div>菜单1-2</div>
		</div>
	</div>
	 
	</div>
 </body>
</html>

lzjqq

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
终于自己写了一个简单的div二级菜单

用别人的菜单实现修改起来总是觉得麻烦，终于自己写了一个，关于mouseleave 和mouseout的问题到快放弃的时候才在网上找到问题的原因。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&...
复制链接

扫一扫