本文实例讲述了jquery实现点击向下展开菜单项（伸缩导航)效果。分享给大家供大家参考。具体如下：

这里演示基于jquery打造的向下展开的多级导航条效果，纵向垂直排列，风格非常的简洁，鼠标点击时候展开菜单的二级项，再次点击的时候又向上合拢，平时只显示一级菜单，二级菜单是隐藏不显示的，代码简洁，包括了完整的JS、css和jquery部分。

运行效果如下图所示：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-show-hidden-style-menu-codes/

具体代码如下：

htmlheadtitle可折叠展开的导航条/title样式正文{ margin :0padd :0 0 12px 0 font-size :12 px；线高：22 pxfont-family:'5b8b4f53 '，' Arial窄带；背景# fff }表格，ul、li、p、h1、h2、h3、h4、h5、h6 { margin:0划水：0;}输入，选择{ font-size :12 px行高：16 px} img { border:0}ul，Li { list-style-type : none；} a { color: # 00007F文本装饰：无；} a :悬停{ color : # bd0a 01文本修饰：下划线；}.box { width : 150 pxmargin : 0 auto }。菜单{ overflow:hidden边框-颜色： # C4D5df边框样式：实心；边框宽度： 0 1px 1px}/* lv1 */.菜单李。一级a {显示：块；高度： 28px线高： 28px背景# EBF3f 8 font-weight :700；color : # 5893 B7 text-缩进量： 14px边框-top: 1px实心# C4D5DF}。菜单李。一级a :悬停{ text-decoration : none}.菜单李。一级a .当前{背景： # B1D7ef}/* lv2 */.菜单li ul { overflow:hidden}。菜单李乌尔。二级{显示：无；}.菜单li ul.level2阿利{显示：块；高度： 28px线高： 28px背景： # fffffffont-weight :400；color : # 42556 Btext-缩进： 18px边框-top: 0px实心# ffffff飞越：隐藏；}.菜单李乌尔。二级阿利：悬停{ color : # f60}/style脚本src=' http : jquery-1。6 .2 .量滴js '/script脚本$(文档)。ready(function(){ $(。第一级a ').单击(function(){ $(this)).addClass('current') //给当前元素添加'当前'样式。下一个()。show() //下一个元素显示。父项()。兄弟姐妹()。儿童(' a ').removeClass(“”当前')//父元素的兄弟元素的子元素a移除'当前'样式。下一个()。hide()；//它们的下一个元素隐藏返回false })；});/script/head dydiv class=' box ' ul class=' menu ' Li class=' level 1 ' a href=' # none '衬衫/a ul class=' level 2 ' lia href=' # none '短袖衬衫/a/李无'长袖衬衫/a/李无'短袖T恤/a/李无'长袖T恤/a/Li/ul/Li Li class='一级' a href=' # 没有卫衣/a ul class=' level 2 ' lia href=' # none '开襟卫衣/a/李无'套头卫衣/a/李无'运动卫衣/a/李无'童装卫衣/a/Li/ul/Li Li级别为“一级”裤子/a ul class=' level 2 ' lia href=' # none '短裤/a/李无'休闲裤/a/李无'牛仔裤/a/李无'免烫卡其裤/a/li /ul /li /ul/div/body/html希望本文所述对大家的jquery程序设计有所帮助。