jQuery创建折叠式菜单


Posted in jQuery onJune 15, 2019

今天给大家介绍如何使用jQuery创建折叠式菜单,即通常所说的手风琴效果(accordion [əˈkɔ:rdiən])。

实现效果如下:

jQuery创建折叠式菜单

一、HTML代码结构

要实现折叠式菜单,代码相当简单,如下所示:

<ul class="accordion">
 <li class="selected">
  <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>
 <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中,有一个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代码相对较长:

<style>
 body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
 }
 
 .accordion,
 .accordion ul { /* 折叠菜单及其子菜单的通用样式 */
  font-size: 14px;
  font-weight: bold;
  width: 300px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  border: 5px solid #343b42;
 }
 
 .accordion ul {
  border: 0;
 }
 
 .accordion ul li { /* 子菜单的菜单项样式 */
  line-height: 50px;
  height: 50px;
  color: #e6efee;
  border-bottom: 1px solid #383b4c;
  background-color: #282b3a;
 }
 
 .accordion li span { /* 折叠菜单的标题样式 */
  line-height: 60px;
  display: block;
  height: 60px;
  color: #e6efee;
  border: 2px solid #343b42;
  background-color: #3789d3;
 }
 
 .accordion li.selected span { /* 折叠菜单选中项的标题样式 */
  color: #e6efee;
  background-color: #393c4b;
 }
 
 .accordion li div { /* 子菜单平时不显示 */
  display: none;
 }
 
 .accordion li.selected div { /* 添加了selected样式时才显示 */
  display: block;
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 #jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 #jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 #jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 #jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 #jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
jQuery操作cookie的示例代码
Jun 05 #jQuery
You might like
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
Python获取央视节目单的实现代码
2015/07/25 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
python导入库的具体方法
2020/06/18 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
军校大学生个人的自我评价
2014/02/17 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
Python Pandas 删除列操作
2022/03/16 Python
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python