本文實例講述了jQuery實現帶動畫效果的多級下拉菜單代碼。分享給大家供大家參考。具體如下：
這是一款基于jQuery實現的多級下拉菜單，帶動畫效果，所有的元素以ul li ul li ul li的循環格式嵌套 如果沒有下級分類 就用li a結束嵌套，代碼內不用toggle()的原因是為了在收縮菜單的時候同時也將該菜單的下級菜單以后的所有元素都隱藏。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-animate-style-down-show-menu-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery多級下拉菜單</title><script language="javascript" type="text/javascript" src="jquery1.3.2.js"></script><style type="text/css">ul,li{list-style:none;font-size:12px;line-height:20px;width:80px;margin:0;padding-left:6px;}.child{ display:none;}.nav a{display:block;color:#5c84c1;padding-left:22px;}</style><script language="javascript" type="text/javascript"> //說明 所有的元素以ul li ul li ul li的循環格式嵌套 如果沒有下級分類 就用li a結束嵌套 $(document).ready(function(){ //$(".nav ul li").children("ul").hide(); $(".nav").find("li").not(":has(ul)").children("a").css({textDecoration:"none",color:"#333",background:"none"}) .click(function(){ $(this).get(0).location.href="'"+$(this).attr("href")+"'"; }); $(".nav").find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"}) .click(function(){ if($(this).next("ul").is(":hidden")){ $(this).next("ul").slideDown("slow"); if($(this).parent("li").siblings("li").children("ul").is(":visible")){ $(this).parent("li").siblings("li").find("ul").slideUp("1000"); $(this).parent("li").siblings("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"}) .end().find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"});} $(this).css({background:"url(images/statu_open.gif) no-repeat left top;"}); return false; }else{ $(this).next("ul").slideUp("normal"); //不用toggle()的原因是為了在收縮菜單的時候同時也將該菜單的下級菜單以后的所有元素都隱藏 $(this).css({background:"url(images/statu_close.gif) no-repeat left top;"}); $(this).next("ul").children("li").find("ul").fadeOut("normal"); $(this).next("ul").find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"}); return false; } }); });</script></head><body><div class="nav"> <ul> <li> <a href="#">一級菜單1</a> <ul class="child"> <li> <a href="#">二級菜單1</a> </li> <li> <a href="#">二級菜單1</a> <ul class="child"> <li> <a href="#">三級菜單1</a> </li> <li> <a href="#">三級菜單1</a> </li> </ul> </li> <li> <a href="#">二級菜單2</a> <ul class="child"> <li> <a href="#">三級菜單2</a> </li> <li> <a href="#">三級菜單2</a> <ul class="child"> <li> <a href="#">四級菜單</a> </li> <li> <a href="#">四級菜單1</a> </li> <li> <a href="#">四級菜單1</a> <ul class="child"> <li> <a href="#">五級菜單1</a> </li> <li> <a href="#">五級菜單1</a> </li> <li> <a href="#">五級菜單1</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="#">一級菜單2</a> <ul class="child"> <li> <a href="#">二級菜單1</a> </li> <li> <a href="#">二級菜單1</a> </li> </ul> </li> <li> <a href="#">一級菜單3</a> <ul class="child"> <li> <a href="#">二級菜單1</a> </li> <li> <a href="#">二級菜單1</a> </li> </ul> </li> <li> <a href="#">一級菜單4</a> </li> </ul></div></body></html>希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
