jquery实现垂直手风琴导航栏


Posted in jQuery onFebruary 18, 2020

本文实例为大家分享了jquery实现垂直手风琴导航栏的具体代码,供大家参考,具体内容如下

  • 做项目时第一次做垂直手风琴导航栏便记录下来
  • 使用jQuery更简单
  • 扩展浏览器支持本例采用jQuery1.12.4版

前端HTML:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <script src="./jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div class="middl">
 <ul class="nav">
 <li>一级菜单
  <ul class="sub">
  <li>二级菜单</li>
  </ul>
 </li>
 <li>一级菜单
  <ul class="sub">
  <li>>二级菜单</li>
  <li>>二级菜单</li>
  </ul>
 </li>
 <li>一级菜单
  <ul class="sub">
  <li>>二级菜单</li>
  </ul>
 </li>
 </ul>
 </div>
 </body>
</html>

CSS样式:

.middl {
 width: 100%;
 height: auto;
 background-color: #ADD8E6;
}

.nav {
 list-style: none;
 width: 100%;
}

.nav>li {
 width: 100%;
 height: auto;
 font-size: 24px;
 text-indent: 1em; /*缩进1个字符*/
 position: relative;
 background-color: #ADD8E6;
 color: #f8f8ff;
 cursor: pointer;
}
/*默认不显示二级菜单*/
.sub {
 display: none; 
}

.sub>li {
 list-style: none; /*去掉小圆点*/
 width: 100%;
 height: 50px;
 line-height: 50px;
 font-size: 24px;
 text-indent: 2em; /*缩进2个字符*/
 background-color: #e6e6fa;
 color: #000;
 cursor: pointer; /*鼠标手势*/
}

引入jQuery:

$(function () {
 //点击展开当前二级菜单
 //1.监听一级菜单的点击事件
 $(".nav>li").click(function () {
  //1.1拿到二级菜单
  var $sub = $(this).children(".sub");
  //1.2让二级菜单展开
  $sub.slideDown(500);
  //1.3拿到所有非当前的二级菜单
  //var otherSub = $(this).siblings().children(".sub");
  ////1.4让所有非当前的二级菜单收起
  //otherSub.slideUp(500);
 });

 //双击关闭当前二级菜单
 $(".nav>li").dblclick(function () {
  var $sub = $(this).children(".sub");
  $sub.slideUp(500);
 })
});

jquery实现垂直手风琴导航栏

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

jQuery 相关文章推荐
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
jQuery实现简易QQ聊天框
Feb 10 #jQuery
jQuery实现简单聊天室
Feb 08 #jQuery
jquery实现点击弹出对话框
Feb 08 #jQuery
jQuery实现简易聊天框
Feb 08 #jQuery
jquery添加div实现消息聊天框
Feb 08 #jQuery
You might like
php分页示例代码
2007/03/19 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
php微信公众号开发之简答题
2018/10/20 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
python删除文件示例分享
2014/01/28 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python保存字符串到文件的方法
2015/07/01 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
学python最电脑配置有要求么
2020/07/05 Python
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
Android面试宝典
2013/08/06 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
大三自我鉴定范文
2013/10/05 职场文书
业务主管岗位职责
2013/11/20 职场文书
机电一体化专业应届生求职信
2013/11/27 职场文书
活动志愿者自荐信
2014/01/27 职场文书
银行办公室岗位职责
2014/03/10 职场文书
民事赔偿协议书
2014/11/02 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
Python何绘制带有背景色块的折线图
2022/04/23 Python
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers