脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery三级下拉菜单

基于jquery实现三级下拉菜单

 更新时间：2016年05月10日 11:02:27   作者：Sabrina_TSM  
这篇文章主要为大家详细介绍了基于jquery实现三级下拉菜单的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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里还有一个带有图标的案例，不点击的话是+号，菜单打开后，变为-号。
以上就是本文的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

相关文章

  • 强烈推荐240多个jQuery插件提供下载

    强烈推荐240多个jQuery插件提供下载

    jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不及 的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
    2008-06-06
  • jQuery实现感应鼠标动画效果自动伸长的输入框实例

    jQuery实现感应鼠标动画效果自动伸长的输入框实例

    这篇文章主要介绍了jQuery实现感应鼠标动画效果自动伸长的输入框,实例分析了jQuery鼠标事件及animate动画效果的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 基于jQuery的select下拉框选择触发事件实例分析

    基于jQuery的select下拉框选择触发事件实例分析

    这篇文章主要介绍了基于jQuery的select下拉框选择触发事件实现方法,结合实例形式分析了常用浏览器对select触发事件的兼容及实现触发的相关技巧,需要的朋友可以参考下
    2016-11-11
  • jQuery实现判断滚动条到底部

    jQuery实现判断滚动条到底部

    这篇文章主要介绍了jQuery实现判断滚动条到底部的相关资料,需要的朋友可以参考下
    2015-06-06
  • jquery实现Li滚动时滚动条自动添加样式的方法

    jquery实现Li滚动时滚动条自动添加样式的方法

    这篇文章主要介绍了jquery实现Li滚动时滚动条自动添加样式的方法,实例分析了jquery响应鼠标事件及动态添加样式的相关技巧,需要的朋友可以参考下
    2015-08-08
  • BootStrap中按钮点击后被禁用按钮的最佳实现方法

    BootStrap中按钮点击后被禁用按钮的最佳实现方法

    在项目开发中经常会遇到这样的功能，为了防止在Bootstrap中点击按钮多次提交，所以希望点击按钮后禁用按钮。怎么实现此功能呢？今天脚本之家小编给大家分享BootStrap中按钮点击后被禁用按钮的最佳实现方法，非常不错，感兴趣的朋友参考下吧
    2016-09-09
  • jQuery实现的自定义轮播图功能详解

    jQuery实现的自定义轮播图功能详解

    这篇文章主要介绍了jQuery实现的自定义轮播图功能,结合实例形式详细分析了轮播图的原理、实现步骤及相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • jQuery实现的鼠标滚轮控制图片缩放功能实例

    jQuery实现的鼠标滚轮控制图片缩放功能实例

    这篇文章主要介绍了jQuery实现的鼠标滚轮控制图片缩放功能,结合完整实例形式分析了jQuery基于鼠标滚轮mousewheel事件进行页面元素属性动态操作的相关实现技巧,需要的朋友可以参考下
    2017-10-10
  • jQuery中:selected选择器用法实例

    jQuery中:selected选择器用法实例

    这篇文章主要介绍了jQuery中:selected选择器用法,实例分析了:selected选择器的功能、定义及匹配被选择的<option>元素的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery插件slicebox实现3D动画图片轮播切换特效

    jQuery插件slicebox实现3D动画图片轮播切换特效

    Slicebox是一款效果非常华丽的jquery和css3 3d幻灯片插件。Slicebox幻灯片插件能够将图片切片，然后做3d旋转。Slicebox幻灯片插件共有4种效果，视觉冲击感非常强。
    2015-04-04

最新评论