jQuery实现的无限级下拉菜单功能示例


Posted in Javascript onSeptember 12, 2016

本文实例讲述了jQuery实现的无限级下拉菜单功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单(无限级)</title>
<style>
*{
  padding: 0;
  margin: 0;
}
li{
  list-style-type: none;
}
body{
  margin: 50px;
}
.hide{
  display: none;
}
.menu{
  cursor: pointer;
}
</style>
</head>
<body>
<ul>
  <li class="menu" style="float: left;">
    <span>一级菜单</span>
    <ul class="hide">
      <li class="menu">
        <span>二级菜单</span>
        <ul class="hide">
          <li class="menu">
            <span>三级菜单</span>
            <ul class="hide">
              <li class="menu">
                <span>四级菜单</span>
                <ul class="hide">
                  <li class="menu"><span>五级菜单</span></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="menu" style="float: left;">
    <span>一级菜单</span>
    <ul class="hide">
      <li class="menu">
        <span>二级菜单</span>
        <ul class="hide">
          <li class="menu">
            <span>三级菜单</span>
            <ul class="hide">
              <li class="menu">
                <span>四级菜单</span>
                <ul class="hide">
                  <li class="menu"><span>五级菜单</span></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
  var menu = $('.menu');
  menu.hover(function(){
    $(this).children('ul').show();
  },function(){
    $(this).children('ul').hide();
  });
});
</script>
</body>
</html>

运行效果图如下:

jQuery实现的无限级下拉菜单功能示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 #Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 #Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 #Javascript
初识简单却不失优雅的Vue.js
Sep 12 #Javascript
jQuery实现简单的tab标签页效果
Sep 12 #Javascript
深入探讨Vue.js组件和组件通信
Sep 12 #Javascript
前端框架Vue.js中Directive知识详解
Sep 12 #Javascript
You might like
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
使用Python函数进行模块化的实现
2019/11/15 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
python实现梯度法 python最速下降法
2020/03/24 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
索尼巴西商店:Sony巴西
2019/06/21 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
中秋节礼品促销方案
2014/02/02 职场文书
网络优化专员求职信
2014/05/04 职场文书
如何写求职信
2014/05/24 职场文书
企业标语口号
2014/06/10 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python