基于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 keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
javascript实现画板功能
Apr 12 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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 和 MySQL 基础教程(二)
2006/10/09 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
基于python实现聊天室程序
2018/07/27 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
超级实用的8个Python列表技巧
2020/08/24 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
python利用线程实现多任务
2020/09/18 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
财政专业求职信范文
2014/02/19 职场文书
1亿有多大教学反思
2014/05/01 职场文书
保护环境倡议书范文
2014/05/13 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android