摘要：

jquery库给我们带来了很多方便的地方，使用jquery实现一个简单的下拉菜单已经是很简单了，但也有不同的实现方法。今天自己使用jquery写了一个下拉菜单，参考了王晓凤的SexyDropDownMenu2010，其中还是有一些东西感觉值得记录一下。

实现：

首先上他的代码（把全部的代码贴上来太长了，就捡部分吧),

一、html中保险商实验所列表

ul class=' top menu ' lia href=' # ' Home/a/Li lia href=' # '教程/a ul class='子菜单1 ' lia href=' # ' Ch1/a/Li lia href=' # ' Ch2/a ul class='子菜单11 ' lia href=' # ' Ch21/a ul class='子菜单11 ' lia href=' # ' Ch211/a ul class='子菜单11 ' lia href=' # ch2111/a href=' # ' Ch32/a/Li/ul/Li/ul/Li lia href=' # ' Resources/a ul class='子菜单1 ' lia href=' # '子导航链接/a/li lia href='# '子导航链接/a/li /ul /li lia href='# '关于我们/a/li lia href='# '广告/a/li lia href='# '提交/a/li lia href='# '联系我们/a/Li/ul其中为六层深度的菜单结构，如下图

二、js部分(css就不贴出来了)

$(文档)。就绪（函数(){ //第一部分//顶部菜单//仅在启用射流研究…时显示下拉触发器（在ul.submenu1*)后面添加空的跨度标记)$('ul.submenu1 ').父项()。追加(“跨度/跨度”)；//第二部分$('ul.topmenu li span ').单击（函数(){//单击触发器时.//以下事件应用于子菜单一本身（上下移动子菜单1)//单击$(这个)下拉子菜单1。父项()。find('ul.submenu1 ').向下滑动("快速")。show()；//在点击后给绑定盘旋处理函数，感觉是比较巧妙的地方$(这个)。父项()。悬停(function() { }，function(){//当鼠标悬停在子菜单一之外时，将其向上移回$(这个).父项()。find('ul.submenu1 ').向上滑动("慢");});//以下事件应用于触发器（触发器的悬停事件)})。悬停(函数(){//在悬停时，添加类悬停' $(这个).addClass(')悬停');}，function(){//在悬停时//在悬停时，移除类悬停' $(这个).removeClass(“”悬停');});//第三部分$('ul.topmenu li ul.submenu1 li ').悬停(function() { $(this)).find('ul.submenu11:first ').显示('慢');}，function() { $(this).find('ul.submenu11:first ').隐藏(“快”)；});});第一部分：

添加了下了菜单的一个触发按钮

第二部分：

绑定了一个点击事件的处理函数

触发按钮被点击后给下拉菜单最外层的里绑定盘旋处理函数，感觉是比较巧妙的地方。

给最外层的里绑定盘旋函数，这里处理函数写的是当鼠标悬停在里上时不做任何处理（第一函数为空),当鼠标离开时里收起。

这样一来，后面展开保险商实验所的菜单都是最外层的里里面，这样菜单就不会自动收起了，也就是等于是鼠标离开了整个菜单，李会自动收起。

第三部分：

给菜单下中嵌套的保险商实验所的盘旋事件绑定函数，用于展开和收起下一级菜单

$(这个)。查找(' ul.submenu11:first ')也是比较巧妙的通过发现获得当前匹配元素集合中每个元素的后代，并通过" ul.submenu11:first "筛选活动下一代元素给以展开。

同时也给下一级菜单绑定了收起的处理函数，与触发菜单中点击给最外层里绑定的收起函数一同作用，是想菜单的自动收起功能。

总结：

其中展现了jquery筛选器的强大和灵活，也体现jquery优美的链式语法。

下面给大家分享一段纯jQuery水平下拉菜单实现

！DOCTYPE htmlhtml head titlejQuery水平下拉菜单实现/title meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 ' charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' script src=' http : bootstrap/js/jquery-1。11 .1 .量滴js '/脚本！-[如果lt IE 9]脚本src=' http : bootstrap/js/html 5 shiv。js /脚本脚本src=' http :引导/js/响应。量滴js /脚本！[endif] -样式类型="文本/CSS ".菜单{border:1px纯红；float:left边距-左侧：4 px背景：红色；} .菜单a { display:block宽度宽度：100像素文本对齐：居中；} .菜单{ display : none } a { cursor : pointer文本装饰：无；}一个：悬停{背景：白色；文本装饰：无；} a :已访问{ text-摆设：无；颜色：黑色；} /style script $(function(){ $(').菜单-标题')。单击(function(){ $(this)).下一个()。切换类()；});});/script/head body div class=' menu ' a class=' menu-title '菜单项/a div class=' menu ' a href=' # ' class=' menu-item '菜单列表/a a href='#' class='菜单项'菜单列表/a a href='#' class='菜单项'菜单列表/a a href='#' class='菜单项'菜单列表/a/div/div class=' menu ' a class=' menu-title '菜单项/a div class=' menu ' a href=' # class='菜单项'菜单列表/a a href='#' class='菜单项'菜单列表/a a href='#' class='菜单项'菜单列表/a a href='#' class='菜单项'菜单列表/a/div/div class=' menu ' a class=' menu-title '菜单项/a div class=' menu ' a href=' # ' class=' menu-item '菜单列表/a a href='#' class='菜单项'菜单列表/a a href='#' class='菜单项'菜单列表/a a href='#' class='菜单项'菜单列表/a/div/div class=' menu ' a class=' menu-title '菜单项/a div class=' menu ' a href=' # class='菜单项'菜单列表/a a href='#' class='菜单项'菜单列表/a a href='#' class='菜单项'菜单列表/a a href='#' class='菜单项'菜单列表/a /div /div /body/html