本文實例為大家分享了jquery實現(xiàn)多級菜單效果展示的具體代碼，供大家參考，具體內(nèi)容如下
<!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; /*漸進增強:首先設(shè)置一個純色的背景，對于不兼容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; //如果當(dāng)前的是收縮的話，我們需要把子子孫孫中所有的ul/em都隱藏和移除open樣式 if(isBlock){ $par.find('ul').css("display","none"); $par.find("em").removeClass("open"); } } } $box.delegate('em',"click",fn)//給$box綁定點擊事件，如果當(dāng)前的事件源是em的話，我們執(zhí)行fn $box.delegate('span',"click",fn)//給$box綁定點擊事件，如果當(dāng)前的事件源是em的話，我們執(zhí)行fn </script></body></html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
