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实现表格冻结顶栏效果
Aug 20 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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常用数学函数汇总
2014/11/21 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
python监控键盘输入实例代码
2018/02/09 Python
python针对excel的操作技巧
2018/03/13 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
文秘自荐信
2013/10/20 职场文书
《在家里》教后反思
2014/03/01 职场文书
入股合作协议书
2014/10/12 职场文书
家属答谢词
2015/01/05 职场文书
幸福终点站观后感
2015/06/04 职场文书
小学班主任心得体会
2016/01/07 职场文书
python字典的元素访问实例详解
2021/07/21 Python