编程 Javascript

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实现的无限级下拉菜单功能示例

- Author -

onestopweb

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

EXTjs4.0的store的findRecord的BUG演示代码

Jun 08 Javascript

javascript函数式编程实例分析

Apr 25 Javascript

js预加载图片方法汇总

Jun 15 Javascript

轻松实现javascript数据双向绑定

Nov 11 Javascript

新入门node.js必须要知道的概念(必看篇)

Aug 10 Javascript

JS中用三种方式实现导航菜单中的二级下拉菜单

Oct 31 Javascript

AngularJS中update两次出现$promise属性无法识别的解决方法

Jan 05 Javascript

Vuex简单入门

Apr 19 Javascript

前端跨域的几种解决方式总结（推荐）

Aug 16 Javascript

Angular搜索场景中使用rxjs的操作符处理思路

May 30 Javascript

element-ui 本地化使用教程详解

Oct 28 Javascript

详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)

Nov 27 Vue.js

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