实例分享jquery实现多级菜单效果
本文主要为大家详细介绍了基于jquery实现多级菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
}
ul,li{
list-style:none;
}
.box{
margin:10px;
padding:10px;
width:300px;
border:1px dashed #008000;
/*渐进增强:首先设置一个纯色的背景，对于不兼容css3的浏览器来说会使用纯色，对于兼容的浏览器，我们在下面在额外的增加一些渐变色，这样会覆盖掉上面*/
background:#ffe470;
background:-webkit-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
background:-moz-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
background:-o-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
background:linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
}
.box li{
position:relative;
line-height:30px;
}
.box em{
position:absolute;
top:7px;
left:0;
width:16px;
height:16px;
background:url("img/icon.png") no-repeat -59px -28px;
cursor:pointer;
}
.box span{
display:block;
padding-left:20px;
}
.box em.open{
background-position:-42px -28px;
}
.box .two{
margin-left:20px;
}
.box .three{
margin-left:40px;
}
.box .four{
margin-left:60px;
}
.box .two,.box .three,.box .four{
display:none;
}
</style>
</head>
<body>
<p class='box' id='box'>
<ul>
<li>
<em></em>
<span>第一级第一个</span>
<ul class='two'>
<li><span>第二级第一个</span></li>
<li>
<em></em><span>第二级第二个</span>
<ul class='three'>
<li><span>第三极第一个</span></li>
<li><span>第三极第二个</span></li>
<li>
<em></em><span>第三极第三个</span>
<ul class='four'>
<li><span>第四级第一个</span></li>
<li><span>第四级第二个</span></li>
<li><span>第四级第三个</span></li>
</ul>
</li>
</ul>
</li>
<li>
<em></em><span>第二级第三个</span>
<ul class='three'>
<li><span>第三级第一个</span></li>
<li><span>第三级第二个</span></li>
<li><span>第三级第三个</span></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<em></em>
<span>第一级第一个</span>
<ul class='two'>
<li><span>第二级第一个</span></li>
<li>
<em></em><span>第二级第二个</span>
<ul class='three'>
<li><span>第三极第一个</span></li>
<li><span>第三极第二个</span></li>
<li>
<em></em><span>第三极第三个</span>
<ul class='four'>
<li><span>第四级第一个</span></li>
<li><span>第四级第二个</span></li>
<li><span>第四级第三个</span></li>
</ul>
</li>
</ul>
</li>
<li>
<em></em><span>第二级第三个</span>
<ul class='three'>
<li><span>第三级第一个</span></li>
<li><span>第三级第二个</span></li>
<li><span>第三级第三个</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
<script>
var $box = $('#box');
$box.find("span").each(function(index,item){
var $pre = $(this).prev();
if($pre[0] && $pre[0].tagName.toLowerCase()==="em"){
$(this).css("cursor","pointer");
}
})
//jQuery里面除了bind、unbind、on、off、click这些绑定事件的方式外，还提供了一种delegate(1.7版本以前用的是live)
function fn(){
var $par = $(this).parent();
var $ul = $($par.children('ul')[0]);
var $em = $($par.children('em')[0]);
if($ul.length>0){
$ul.toggle();
$em.toggleClass("open");
var isBlock = $ul.css('display')==="block"?true:false;
//如果当前的是收缩的话，我们需要把子子孙孙中所有的ul/em都隐藏和移除open样式
if(isBlock){
$par.find('ul').css("display","none");
$par.find("em").removeClass("open");
}
}
}
$box.delegate('em',"click",fn)//给$box绑定点击事件，如果当前的事件源是em的话，我们执行fn
$box.delegate('span',"click",fn)//给$box绑定点击事件，如果当前的事件源是em的话，我们执行fn
</script>
</body>
</html>相关推荐：
以上是实例分享jquery实现多级菜单效果的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
华为手机如何实现双微信登录？
Mar 24, 2024 am 11:27 AM
华为手机如何实现双微信登录？随着社交媒体的兴起，微信已经成为人们日常生活中不可或缺的沟通工具之一。然而，许多人可能会遇到一个问题：在同一部手机上同时登录多个微信账号。对于华为手机用户来说，实现双微信登录并不困难，本文将介绍华为手机如何实现双微信登录的方法。首先，华为手机自带的EMUI系统提供了一个很便利的功能——应用双开。通过应用双开功能，用户可以在手机上同
PHP编程指南：实现斐波那契数列的方法
Mar 20, 2024 pm 04:54 PM
编程语言PHP是一种用于Web开发的强大工具，能够支持多种不同的编程逻辑和算法。其中，实现斐波那契数列是一个常见且经典的编程问题。在这篇文章中，将介绍如何使用PHP编程语言来实现斐波那契数列的方法，并附上具体的代码示例。斐波那契数列是一个数学上的序列，其定义如下：数列的第一个和第二个元素为1，从第三个元素开始，每个元素的值等于前两个元素的和。数列的前几个元
如何在华为手机上实现微信分身功能
Mar 24, 2024 pm 06:03 PM
如何在华为手机上实现微信分身功能随着社交软件的普及和人们对隐私安全的日益重视，微信分身功能逐渐成为人们关注的焦点。微信分身功能可以帮助用户在同一台手机上同时登录多个微信账号，方便管理和使用。在华为手机上实现微信分身功能并不困难，只需要按照以下步骤操作即可。第一步：确保手机系统版本和微信版本符合要求首先，确保你的华为手机系统版本已更新到最新版本，以及微信App
掌握Golang如何实现游戏开发的可能性
Mar 16, 2024 pm 12:57 PM
在当今的软件开发领域中，Golang（Go语言）作为一种高效、简洁、并发性强的编程语言，越来越受到开发者的青睐。其丰富的标准库和高效的并发特性使它成为游戏开发领域的一个备受关注的选择。本文将探讨如何利用Golang来实现游戏开发，并通过具体的代码示例来展示其强大的可能性。1.Golang在游戏开发中的优势作为一种静态类型语言，Golang在构建大型游戏系统
PHP游戏需求实现指南
Mar 11, 2024 am 08:45 AM
PHP游戏需求实现指南随着互联网的普及和发展，网页游戏的市场也越来越火爆。许多开发者希望利用PHP语言来开发自己的网页游戏，而实现游戏需求是其中一个关键步骤。本文将介绍如何利用PHP语言来实现常见的游戏需求，并提供具体的代码示例。1.创建游戏角色在网页游戏中，游戏角色是非常重要的元素。我们需要定义游戏角色的属性，比如姓名、等级、经验值等，并提供方法来操作这些
jQuery小技巧：快速修改页面所有a标签的文本
Feb 28, 2024 pm 09:06 PM
标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：<
使用jQuery修改所有a标签的文本内容
Feb 28, 2024 pm 05:42 PM
标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：
如何判断jQuery元素是否具有特定属性？
Feb 29, 2024 am 09:03 AM
如何判断jQuery元素是否具有特定属性？在使用jQuery操作DOM元素时，经常会遇到需要判断元素是否具有某个特定属性的情况。这种情况下，我们可以借助jQuery提供的方法来轻松实现这一功能。下面将介绍两种常用的方法来判断一个jQuery元素是否具有特定属性，并附上具体的代码示例。方法一：使用attr()方法和typeof操作符//判断元素是否具有特定属
