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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 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连接数据库代码应用分析
2011/05/29 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
简明json介绍
2008/09/28 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
javascript防抖函数debounce详解
2019/06/11 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
python3中bytes和string之间的互相转换
2017/02/09 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
Python正则表达式学习小例子
2020/03/03 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
请解释流与文件有什么不同
2016/07/29 面试题
abstract class和interface有什么区别
2013/08/04 面试题
软件工程专业推荐信
2013/10/28 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
女子职高个人自荐书
2014/02/01 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
优秀员工推荐材料
2014/12/20 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA