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鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 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获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
python实现的重启关机程序实例
2014/08/21 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
法雷奥SQA(electric)面试问题
2016/01/23 面试题
有个性的自我评价范文
2013/11/15 职场文书
大学生实习思想汇报
2014/01/12 职场文书
房屋公证委托书
2014/04/03 职场文书
工程材料采购方案
2014/05/18 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
辞职信怎么写
2015/02/27 职场文书
英文自荐信范文
2015/03/25 职场文书
离职证明格式样本
2015/06/12 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers