本文实例为大家分享了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里还有一个带有图标的案例,不点击的话是+号,菜单打开后,变为-号。
以上就是本文的全部内容,希望对大家的学习有所帮助。
您可能感兴趣的文章:
- jQuery下拉菜单的实现代码
- 精心挑选的15个jQuery下拉菜单制作教程
- bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
- jQuery实现的checkbox级联选择下拉菜单效果示例
- jQuery实现的导航下拉菜单效果示例
- jQuery实现的导航下拉菜单效果
- jQuery插件cxSelect多级联动下拉菜单实例解析
- jQuery模拟select实现下拉菜单功能
- jQuery实现的页面详情展开收起功能示例
- jquery实现先淡出再折叠收起的动画效果
- jQuery使用slideUp方法实现控制元素缓慢收起
- jQuery实现下拉菜单动态添加数据点击滑出收起其他功能