基于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 名称冲突的解决方法
Apr 08 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 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
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Python使用xpath实现图片爬取
2020/09/16 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
python statsmodel的使用
2020/12/21 Python
Java基础类库面试题
2013/09/04 面试题
在校生党员自我评价
2013/09/25 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
食品流通安全承诺书
2014/05/22 职场文书
开展创先争优活动总结
2014/08/28 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
教师工作表现自我评价
2015/03/05 职场文书
详解Python中*args和**kwargs的使用
2022/04/07 Python
mysql 子查询的使用
2022/04/28 MySQL