<!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> <ul> <li> <em></em> <span>第一级第一个</span> <ul> <li><span>第二级第一个</span></li> <li> <em></em><span>第二级第二个</span> <ul> <li><span>第三极第一个</span></li> <li><span>第三极第二个</span></li> <li> <em></em><span>第三极第三个</span> <ul> <li><span>第四级第一个</span></li> <li><span>第四级第二个</span></li> <li><span>第四级第三个</span></li> </ul> </li> </ul> </li> <li> <em></em><span>第二级第三个</span> <ul> <li><span>第三级第一个</span></li> <li><span>第三级第二个</span></li> <li><span>第三级第三个</span></li> </ul> </li> </ul> </li> </ul> <ul> <li> <em></em> <span>第一级第一个</span> <ul> <li><span>第二级第一个</span></li> <li> <em></em><span>第二级第二个</span> <ul> <li><span>第三极第一个</span></li> <li><span>第三极第二个</span></li> <li> <em></em><span>第三极第三个</span> <ul> <li><span>第四级第一个</span></li> <li><span>第四级第二个</span></li> <li><span>第四级第三个</span></li> </ul> </li> </ul> </li> <li> <em></em><span>第二级第三个</span> <ul> <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>
基于jquery实现多级菜单效果
内容版权声明：除非注明，否则皆为本站原创文章。