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实现web页面樱花坠落的特效
Jun 01 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 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+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
SVM基本概念及Python实现代码
2017/12/27 Python
python http接口自动化脚本详解
2018/01/02 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
Python下简易的单例模式详解
2019/04/08 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
flask框架中的cookie和session使用
2021/01/31 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
大学生个人求职口试自我评价
2014/02/16 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
锦旗赠语
2015/06/23 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书