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.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
用jQuery实现抽奖程序
Apr 12 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
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
分享10段PHP常用代码
2015/11/11 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
django如何连接已存在数据的数据库
2018/08/14 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
python交易记录整合交易类详解
2019/07/03 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
期末学生评语大全
2014/04/24 职场文书
给校长的建议书200字
2014/05/16 职场文书
师德师风的心得体会
2014/09/02 职场文书
测量员岗位职责
2015/02/14 职场文书
Python之matplotlib绘制折线图
2022/04/13 Python