jquery 多级下拉菜单核心代码


Posted in Javascript onMay 21, 2010

jquery

$(document).ready(function(){ 
$("ul li").hover(function(){ 
$(this).find("ul:first").show();//鼠标滑过查找li下面的第一个ul然后显示; 
},function(){ 
$(this).find("ul:first").hide();//鼠标离开隐藏li下面d的ul; 
}) 
$("ul li ul li ul").prev().addClass("bbb");//给li下面ul是aaa的样式的前一个同辈元素添加css; 
})

css
ul, li{padding:0;margin:0;} 
ul li{float:left;;margin-right:1px;display:inline;list-style:none;text-align:center;} 
ul li ul li{float:none;background:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;} 
ul li ul{display:none;} 
ul a{text-decoration:none;width:80px;height:20px;line-height:20px;display:block;background:#bbb;font-size:12px} 
ul li a:hover{background:#eee;color:#000} 
ul li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff} 
ul li ul li .aaa li{float:none;} 
body .bbb{background:#f00;color:#fff}

html
<ul> 
<li> 
<a href="">栏目一</a> 
<ul> 
<li><a href="">菜单一</a></li> 
<li><a href="">菜单一</a></li> 
<li><a href="">菜单一</a></li> 
<li><a href="">菜单一</a> 
<ul class="aaa"> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a> 
<ul class="aaa"> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a> 
<ul class="aaa"> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a> 
<ul class="aaa"> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
</ul> 
</li> 
<li><a href="">菜单三</a></li> 
</ul> 
</li> 
<li><a href="">菜单三</a></li> 
</ul> 
</li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li> 
<a href="">栏目二</a> 
</li> 
<li> 
<a href="">栏目三</a> 
<ul> 
<li><a href="">菜单三</a> 
</li> 
<li><a href="">菜单三</a> 
<ul class="aaa"> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a> 
<ul class="aaa"> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a> 
<ul class="aaa"> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
</ul> 
</li> 
<li><a href="">菜单三</a> 
<ul class="aaa"> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a> 
<ul class="aaa"> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
</ul> 
</li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
</ul> 
</li> 
<li><a href="">菜单三</a></li> 
<li><a href="">菜单三</a></li> 
</ul> 
</li> 
<li> 
<a href="">栏目四</a> 
</li> 
</ul>
Javascript 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
javascript工具库代码
Mar 29 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
JQuery 学习技巧总结
May 21 #Javascript
Jquery调用webService远程访问出错的解决方法
May 21 #Javascript
ExtJS 下拉多选框lovcombo
May 19 #Javascript
javascript 得到变量类型的函数
May 19 #Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 #Javascript
js 复制或插入Html的实现方法小结
May 19 #Javascript
15 个 JavaScript Web UI 库
May 19 #Javascript
You might like
十天学会php(3)
2006/10/09 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
大专生简历的自我评价
2013/11/26 职场文书
学校后勤人员职责
2013/12/27 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
主题班会演讲稿
2014/05/22 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
务虚会发言材料
2014/12/25 职场文书
合理化建议书
2015/02/04 职场文书
浅谈python数据类型及其操作
2021/05/25 Python