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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery实现购物车全功能
Jan 11 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批量生成缩略图的代码
2008/07/19 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
JavaScript 事件系统
2010/07/22 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python 将字符串转换成字典dict
2013/03/24 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
会计电算化实训报告
2014/11/04 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
付款承诺函范文
2015/01/21 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js