本文实例讲述了jQuery实现的手风琴侧边菜单效果。分享给大家供大家参考，具体如下：

动手做了一个简单手风琴菜单，上图：

点击B可收缩C列表，点击C改变自身和父节点B的样式，悬浮时均有不同的样式改变。

先看页面代码，列表的嵌套：

div id=' MenuDiv ' ul id=' menu ' Li class=' parent Li ' SPan b/SPan ul class=' children ul ' Li class=' children Li ' SPan c/SPan/丽丽class=' children Li ' SPan c/SPan/Li/ul/丽丽' Li父母' SPan b/SPan ul SPan=' Li子女' SPan c/SPan/丽丽class=' children Li ' SPan c/SPan/丽丽李的孩子代码，主要设置背景色和子菜单左边框的样式，设置悬浮和选中的样式，开始设置子菜单不显示（通过射流研究…设置点击之后再显示):

# menuDiv { width: 200px背景-颜色： # 029 FD 4；}.亲李{宽： 100%；线高： 40px页边距-top : 1px；背景# 1c 73 bacolor : # fffcursor :指针；字体粗细：加粗；}.parentLi span { padd : 10px } . parentLi : Hover，选择了父菜单{ background: # 0033CC}。儿童ul {底色： # ffffff显示器：无；}.子李{宽： 100%；线高： 30px字号：9em页边距-top : 1px；背景# 63B8FFcolor: # 000000左衬垫左转left: 15pxcursor:指针；}.childrenLi:hover，选定的子菜单{边框-左侧： 5px # 0033 cc实心；背景# 0099CC左衬垫left: 15px}接下来就是点击事件的代码：

$('.parentLi ').click(函数(事件)){ $(this).孩子们儿童.slide Toggle()；});$('.儿童李.点击(功能(事件){事件。stopperpagation()；$('.儿童李.移除类(“选定的子菜单”)；$('.parentLi ').移除类(' selectedParentMenu ')；$(这个)。父母('。parentLi ').添加类(' selectedParentMenu ')；$(这个)。添加类(“选定的子菜单”)；});需要注意的是列表嵌套，会导致事件冒泡，所以在子菜单的点击事件里面要组织冒泡，事件。stopperpagation()；详见应用程序接口

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery表格(table)操作技巧汇总》 、 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。