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正则验证注册页面经典实例
Jun 10 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 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 大数据量及海量数据处理算法总结
2011/05/07 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
PDO::errorInfo讲解
2019/01/28 PHP
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
node.js cookie-parser之parser.js
2016/06/06 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
在django模板中实现超链接配置
2019/08/21 Python
解释一下抽象方法和抽象类
2016/08/27 面试题
实习医生自我评价
2013/09/22 职场文书
应届生会计电算化求职信
2013/10/03 职场文书
2013年保送生自荐信格式
2013/11/20 职场文书
入党积极分子介绍信
2014/01/17 职场文书
什么是就业协议书
2014/04/17 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
师德标兵事迹材料
2014/12/19 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技