当前位置: 编程技术>jquery
jquery无限层级下拉菜单实现代码
来源: 互联网 发布时间：2014-10-08
本文导语: 1，html部分 代码示例: 首页 下拉一 下拉二 下拉二 下拉二 下拉二 下拉二 下拉二 下...
1，html部分
代码示例:
2，css代码部分
代码示例:
#daohang li ul li{position:relative;}
#daohang li ul{display:none;}
#daohang li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
#daohang li ul li .aaa li{float:none;}
#daohang li ul{display:none;}
#daohang li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
#daohang li ul li .aaa li{float:none;}
3.js(基于jquery)代码部分，级联下拉菜单效果。
代码示例:
$(document).ready(function(){
$("#daohang li").hover(function(){
$(this).find("ul:first").slideDown(200);//鼠标滑过查找li下面的第一个ul然后显示；
},function(){
$(this).find("ul:first").slideUp(200);//鼠标离开隐藏li下面d的ul；
});
$("#daohang li").hover(function(){
$(this).find("ul:first").slideDown(200);//鼠标滑过查找li下面的第一个ul然后显示；
},function(){
$(this).find("ul:first").slideUp(200);//鼠标离开隐藏li下面d的ul；
});
您可能感兴趣的文章：
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。