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 相关文章推荐
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
jquery操作select大全
Apr 25 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
javascript实现自由编辑图片代码详解
Jun 21 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
js canvas实现五子棋小游戏
Jan 22 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对数组的定义以及数组的创建方法
2015/11/27 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
简单的代码实现jquery定时器
2013/11/17 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
python检测服务器是否正常
2014/02/16 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python截取两个单词之间的内容方法
2018/12/25 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Python 绘制可视化折线图
2020/07/22 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
清明节扫墓活动方案
2014/03/02 职场文书
个人违纪检讨书
2014/09/15 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
工程部文员岗位职责
2015/02/04 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
在职证明书模板
2015/06/15 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
创业计划书之花店
2019/09/20 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书