jQuery创建折叠菜单

今天给大家介绍一下如何使用jQuery创建折叠菜单，一般称为手风琴效果(accordion [k:rdin])。

效果如下：

1.HTML代码结构

要实现折叠菜单，代码相当简单，如下所示：

“手风琴”李《文选》/北京故宫/李立明十三陵/圆明园/长城/上海名胜/东方明珠/外滩Li li豫园/li李龙华寺/li /ul /div /li li span广州景点/span div ul li白云山/li li李中山纪念馆/li li华南植物园/li li越秀公园/li /ul /div /li li span深圳景点/span div ul li世界之窗/Li li东门老街/li li海上花园旅游区/li li中信民宿航空母舰/li /ul /div /li li span厦门景点/span div ul li鼓浪屿/li li集美嘉庚花园/li li石湾植物园/li li方特梦幻王国/li /ul /div /li/ul整个折叠菜单是一个无序列表，每个菜单项都是一个Li。 在li中，标题有一个跨度，div包含子菜单的另一个无序列表。

二、jQuery代码分析

JQuery的代码也非常简单，只有几行：

$(function(){ $(' ul . accordion Li span ')。on('click ')，function () { $(this)。父项()。兄弟姐妹()。removeClass('选定')。查找(' div ')。hide()；$(这个)。父项()。addClass('选定')；$(这个)。下一个()。向下滑动(500)；});});我们来分析一下。

首先，通过jQuery的选择器“ul.accordion li span”点击菜单项的标题来折叠菜单。

click事件处理程序的第一行做两件事，一是去掉其他菜单项的选中样式，二是隐藏其他菜单项(包括子菜单)的div。$(这个)。父母是跨度的上层，即li。兄弟元素()找到它的兄弟元素，并使用chain call首先移除它所选择的样式，然后找到它的div并隐藏它。

第二行代码将所选样式添加到当前单击的菜单中。

第三行代码展开当前菜单的子菜单。$(这个)。next()是span的下一个元素，即div(包含子菜单)。slideDown(500)使用CSS的动画效果，将子菜单慢慢向下展开，500指定动画时间为500毫秒。

三、CSS代码分析

这个折叠菜单的HTML代码和jQuery代码都相当简单，但是CSS代码比较长：

样式正文{ font-family: Verdana，Arial，Helvetica，无衬线；} .手风琴。手风琴式ul {/*折叠菜单及其子菜单的一般样式*/font-size : 14px；font-weight:粗体；宽度： 300 px；margin : 0；padd : 0；list-style:无；文本对齐：中心；border: 5px固体# 343b42} .手风琴ul { border : 0；} .手风琴式ul li {/*子菜单的菜单项样式*/line-height : 50px；高度： 50px；color: # e6efeeborder-bottom: 1px实心# 383b4c背景-color : # 282 b3a；} .手风琴li span {/*折叠菜单的标题样式*/line-height : 60px；display:块；高度： 60px；color: # e6efeeborder: 2px实心# 343b42背景-颜色： # 3789 D3；} .手风琴li.selected span {/*折叠菜单中所选项目的标题样式*/color : # E6 efee；背景-color : # 393 c4b；} .手风琴li div {/*子菜单通常不显示*/display : none；} .手风琴li.selected div {/*所选样式被添加到display */display:块；}/style以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。