基于jquery实现三级下拉菜单


Posted in Javascript onMay 10, 2016

本文实例为大家分享了jquery三级下拉菜单的具体实现代码,供大家参考,具体内容如下

在写这个的时候,首先要捋顺思路。点一个菜单的时候,其他的要闭合,点一级菜单的时候,二三级菜单要闭合,等等。
大致代码如下:

<body>
 <aside>
  <ul class="one">
   <li> <a href="#" class="a">目录A</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二级目录A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三级目录A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二级目录B</a></li>
     <li><a href="#" class="a">二级目录C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目录B</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二级目录A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三级目录A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二级目录B</a></li>
     <li><a href="#" class="a">二级目录C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目录C</a> </li>
  </ul>
 </aside>

//jQuery部分
<script src="js/jquery-1.8.3.min.js"></script>
<script>
  $(document).ready(function() {
   $('.a').click(function() {
    if ($(this).siblings('ul').css('display') == 'none') {
     $(this).siblings('ul').slideDown(100).children('li');
     if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {
      $(this).parents('li').siblings('li').children('ul').slideUp(100);

     }
    } else {
     //控制自身菜单下子菜单隐藏
     $(this).siblings('ul').slideUp(100);
     //控制自身菜单下子菜单隐藏
     $(this).siblings('ul').children('li').children('ul').slideUp(100);
    }
   });
 });
</script>
</body>

如果要添加样式的话,一定要注意,否则菜单可能会出现错误。
完整代码地址:https://github.com/SabrinaTian/ThreeMenuNav.git
git里还有一个带有图标的案例,不点击的话是+号,菜单打开后,变为-号。
以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 #Javascript
bootstrap网页框架的使用方法
May 10 #Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 #Javascript
jQuery的文档处理程序详解
May 10 #Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 #Javascript
jQuery对象与DOM对象转换方法详解
May 10 #Javascript
jQuery对象的链式操作用法分析
May 10 #Javascript
You might like
一个php导出oracle库的php代码
2009/04/20 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
PHP精确计算功能示例
2016/11/29 PHP
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python fabric实现远程部署
2017/01/05 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
Django框架模板用法入门教程
2019/11/04 Python
python文字转语音实现过程解析
2019/11/12 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
房屋公证委托书
2014/04/03 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
MYSQL 表的全面总结
2021/11/11 MySQL
Python图像处理库PIL详细使用说明
2022/04/06 Python