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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 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添加MySQL数据记录代码
2008/06/07 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
js和as的稳定传值问题解决
2013/07/14 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
vue实现动态按钮功能
2019/05/13 Javascript
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
python三引号如何输入
2020/07/06 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
廉洁家庭事迹材料
2014/05/15 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
离职证明格式样本
2015/06/12 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
python利用while求100内的整数和方式
2021/11/07 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android