简单左侧菜单 jquery <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .word .word-left{ 188px; float:left; height:auto; } *{ padding:0px; margin:0px; font-size:12px;} a{ text-decoration:none;} .snvnav{ 960px; height:auto; margin:0px auto; overflow:hidden;} #c{ list-style:none; 150px; height:auto;} #c a{ display:block; height:30px; line-height:30px;} #c li{line-height:30px; border-bottom:1px #CCC solid;} #c li.cur .m1{ display:block; background:#FF0;} #c li a{ display:block; font-size:16px; font-weight:bold; color:#0000FF; font-weight:bold;} #c li ul.navsub{ list-style:none; 130px; height:auto; padding-left:20px;} #c li ul.navsub li{ line-height:30px; border-bottom:1px #CCCCCC solid;} #c li ul.navsub li a{ font-family:"宋体"; font-size:14px; color:#FF0000; font-weight:normal;} #c li ul.navsub li ul.subnav3{ list-style:none; 110px; height:auto; padding-left:20px; display:none} #c li ul.navsub li ul.on{display:block;} #c li ul.navsub li ul.subnav3 li{ line-height:30px; border-bottom:none;} #c li ul.navsub li ul.subnav3 li a{ color:#333333; font-size:12px; font-weight:normal;} </style> </head> <body> <div class="snvnav"> <ul id="c"> <li class="cur"><a class="m1" href="javascript:;">消费电子类</a> <ul class="navsub" style="display:block;"> <li><a href="javascript:;">纸箱</a> <ul class="subnav3 on"> <li><a href="javascript:;">包装材料大纸箱</a></li> <li><a href="javascript:;">包装中纸箱</a></li> <li><a href="javascript:;">小纸箱小纸箱</a></li> </ul> </li> <li> <a href="javascript:;">保护膜</a> <ul class="subnav3"> <li><a href="javascript:;">包装材料大纸箱</a></li> <li><a href="javascript:;">包装中纸箱</a></li> </ul> </li> <li> <a href="javascript:;">单面胶带</a> <ul class="subnav3"> <li><a href="javascript:;">包装材料大纸箱</a></li> <li><a href="javascript:;">包装中纸箱</a></li> <li><a href="javascript:;">小纸箱小纸箱</a></li> </ul> </li> </ul> </li> <li><a class="m1" href="javascript:;">塑胶产品类</a> <ul class="navsub" style="display:none;"> <li><a href="javascript:;">纸箱</a> <ul class="subnav3 on"> <li><a href="javascript:;">包装材料大纸箱</a></li> <li><a href="javascript:;">包装中纸箱</a></li> <li><a href="javascript:;">小纸箱小纸箱</a></li> </ul> </li> <li> <a href="javascript:;">保护膜</a> <ul class="subnav3"> <li><a href="javascript:;">包装材料大纸箱</a></li> <li><a href="javascript:;">包装中纸箱</a></li> </ul> </li> <li> <a href="javascript:;">单面胶带</a> <ul class="subnav3"> <li><a href="javascript:;">包装材料大纸箱</a></li> <li><a href="javascript:;">包装中纸箱</a></li> <li><a href="javascript:;">小纸箱小纸箱</a></li> </ul> </li> </ul> </li> <li> <a class="m1" href="javascript:;">包装材料类</a> <ul class="navsub" style="display:none;"> <li><a href="javascript:;">纸箱</a> <ul class="subnav3"> <li><a href="javascript:;">包装材料大纸箱</a></li> <li><a href="javascript:;">包装中纸箱</a></li> <li><a href="javascript:;">小纸箱小纸箱</a></li> <li><a href="javascript:;">纸箱A</a></li> <li><a href="javascript:;">产品名称</a></li> </ul> </li> <li><a href="javascript:;">保护膜</a></li> <li><a href="javascript:;">单面胶带</a></li> <li><a href="javascript:;">双面胶带</a></li> <li><a href="javascript:;">绝缘材料</a></li> <li><a href="javascript:;">SONY索尼</a></li> <li><a href="javascript:;">冲型加工</a></li> <li><a href="javascript:;">TESA德莎</a></li> <li><a href="javascript:;">NITTO日本</a></li> <li><a href="javascript:;">3M</a></li> </ul> </li> </ul> </div> <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> <script type="text/javascript"> $(function(){ var xx = $("#c>li").eq(0)[0]; $("#c>li").bind("click",function(){ if(xx == this){ $(this).removeClass("cur").children("ul").slideUp(); xx = null; return; } $(this).addClass("cur").children("ul").slideDown(); $(this).siblings().removeClass("cur").children("ul").slideUp(); xx = this; }); var yy = $("#c .navsub>li").eq(0)[0]; $("#c .navsub>li").bind("click",function(){ if(yy == this){ $(this).children("ul").slideUp(); yy = null; return false; } $(this).children("ul").slideDown(); $(this).siblings().children("ul").slideUp(); yy = this; return false; }) }) </script> </body> </html>