本文實例為大家分享了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>
<div 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>
</div>
<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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。