jQuery实现的无限级下拉菜单功能示例
本文实例讲述了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切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
-
本文向大家介绍jquery无限级联下拉菜单简单实例演示，包括了jquery无限级联下拉菜单简单实例演示的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下： 最终效果图： 因为是级联，所以数据必须是树型结构的，这里的测试数据如下： 看下效果图： 1、效果图一： 2、效果图二： 3、效
-
本文向大家介绍Bootstrop实现多级下拉菜单功能，包括了Bootstrop实现多级下拉菜单功能的使用技巧和注意事项，需要的朋友参考一下 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 下面给大家分享bootstrap多级下拉菜单功能的实例代码。 先给大家看下效果
-
本文向大家介绍iOS 三级下拉菜单功能实现，包括了iOS 三级下拉菜单功能实现的使用技巧和注意事项，需要的朋友参考一下 前言 App 常用控件 -- 多级下拉菜单, 如团购类, 房屋类, 对数据进行筛选. 有一级, 二级, 三级, 再多就不会以这种样式,呈现给用户了. 作者就简单聊一下 多级下拉菜单 一 目标 默认显示一个 TableView, 点击数据后, 添加第二个TableView, 并实现
-
本文向大家介绍jQuery模拟select实现下拉菜单功能，包括了jQuery模拟select实现下拉菜单功能的使用技巧和注意事项，需要的朋友参考一下 用jquery模拟一淘上面的搜索下拉的功能，利用css3做箭头的动画效果。 JS代码： demo:(只有在高级的chrome及firefox下才能看到CSS3动画效果) 截个图： 代码： 以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多
-
本文向大家介绍jQuery实现简单二级下拉菜单，包括了jQuery实现简单二级下拉菜单的使用技巧和注意事项，需要的朋友参考一下 html代码 js代码 css代码 最好不要忘记插入jQuery js文件,最好下载最新的。 以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍jQuery实现的点击显示隐藏下拉菜单功能完整示例，包括了jQuery实现的点击显示隐藏下拉菜单功能完整示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的点击显示隐藏下拉菜单功能。分享给大家供大家参考，具体如下： PS：感兴趣的朋友可以使用如下在线工具测试上述代码： 在线HTML/CSS/JavaScript前端代码调试运行工具： http://tools