这篇文章主要为大家详细介绍了jQuery创建折叠式菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
今天给大家介绍如何使用jQuery创建折叠式菜单,即通常所说的手风琴效果(accordion [əˈkɔ:rdiən])。
实现效果如下:
一、HTML代码结构
要实现折叠式菜单,代码相当简单,如下所示:
- 北京景点
- 故宫
- 十三陵
- 圆明园
- 长城
- 上海景点
- 东方明珠
- 外滩
- 豫园
- 龙华寺
- 广州景点
- 白云山
- 中山纪念堂
- 华南植物园
- 越秀公园
- 深圳景点
- 世界之窗
- 东门老街
- 海上田园旅游区
- 中信明思克航母
- 厦门景点
- 鼓浪屿
- 集美嘉庚园
- 万石植物园
- 方特梦幻王国
整个折叠式菜单是一个无序列表,每个菜单项是一个li。在li中,有一个span用于标题,一个div中包含了另外一个无序列表,用于子菜单。
二、jQuery代码分析
jQuery的代码也很简单,只有短短的几行:
$(function () { $("ul.accordion li span").on('click', function () { $(this).parent().siblings().removeClass('selected').find('div').hide(); $(this).parent().addClass('selected'); $(this).next().slideDown(500); }); });
我们来分析一下。
首先,通过jQuery的选择器"ul.accordion li span"指定在菜单项的标题上点击,可以折叠菜单。
click事件处理函数的第一行代码做了两件事,一个是将其它菜单项的selected样式移除,另一个是将其它菜单项的div(包括其中的子菜单)隐藏起来。$(this).parent即span的上一级,即li。.siblings()查找它的兄弟元素,并使用链式调用首先移除其selected样式,再查找其中的div并隐藏。
第二行代码为当前点击菜单添加selected样式。
第三行代码展开当前菜单的子菜单。$(this).next()即span的下一个元素,即div(其中包含子菜单)。.slideDown(500)将子菜单向下缓缓展开,使用了CSS的动画效果,500指定动画时间为500毫秒。
三、CSS代码分析
这个折叠菜单的HTML代码和jQuery代码本身都相当简单,但CSS代码相对较长:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持html中文网。
以上就是jQuery创建折叠式菜单的详细内容,更多请关注0133技术站其它相关文章!