jquery实现菜单的二级联动

最新推荐文章于 2021-08-05 19:20:55 发布

原创最新推荐文章于 2021-08-05 19:20:55 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的菜单栏交互效果，通过鼠标悬停显示下级菜单，并在离开时隐藏，具体包括页面代码和相应的JavaScript逻辑。

页面代码

<div id="menu" class="w_80">
    	<ul id="nav">
    		<li><a href="jsp/main.jsp">首  页</a></li>
    		<li><a href="">我的房源</a></li>
    		<li><a href="">发布房源</a></li>
    		<li class="mainlevel"><a href="#">系统管理</a>
	    		<ul>
		    		<li><a href="">会员管理</a></li>
		    		<li><a href="">房源管理</a></li>
		    		<li><a href="">户型管理</a></li>
		    		<li><a href="">市区管理</a></li>
		    		<li><a href="">街道管理</a></li>
	    		</ul>
    		</li>
    	</ul>
    </div>

javascript

$(document).ready(function(){
	//系统管理菜单
	$(".mainlevel").find("ul").slideUp();
	jQuery.navlevel2 = function(level1,dytime) {
      	$(level1).mouseenter(function(){
          	varthis = $(this);
          	delytime=setTimeout(function(){
            	varthis.find('ul').slideDown();
        	},dytime);
      	});
      	$(level1).mouseleave(function(){
         	clearTimeout(delytime);
         	$(this).find('ul').slideUp();
      	});
    };
  	$.navlevel2("li.mainlevel",300);
});