[js]悬浮显示二级菜单的实现

最新推荐文章于 2022-01-22 20:47:29 发布

torrrino

最新推荐文章于 2022-01-22 20:47:29 发布

阅读量4.8k

点赞数 3

本文链接：https://blog.csdn.net/torrrino/article/details/64193713

版权

<!-- 悬浮显示二级菜单 -->
	<script type="text/javascript">
		$("#first-menu").mouseover(function(){
			$("#second-menu").show();			
		})
		$("#second-menu").mouseover(function(){
			$(this).show();	
		})
		$("#first-menu").mouseout(function(){	
			$("#second-menu").hide();
		})
		$("#second-menu").mouseout(function(){
			$(this).hide(); 
		})
	</script>

一级菜单id = first-menu
二级菜单id = second-menu
isShow表示二级菜单是否显示，初始值设置为false
这段代码关键在于鼠标从一级菜单移动到二级菜单时会同时执行$("#first-menu").mouseout()和$("#second-menu").mouseover()，所以在first-menu和second-menu上分别设置show和hide就可以。