本文實例講述了jQuery實現幻樹形下拉菜單特效，實現自動伸縮，分享給大家供大家參考。
運行jQuery樹形下拉菜單特效效果圖：
為大家分享的jQuery樹形下拉菜單代碼如下
<head><title>常用的jquery下拉菜單</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript"> $(document).ready( function() { $(".menuTitle").click(function(){ $(this).next("div").slideToggle("slow") .siblings(".menuContent:visible").slideUp("slow"); $(this).toggleClass("activeTitle"); $(this).siblings(".activeTitle").removeClass("activeTitle"); }); }); </script><style type="text/css"> body { margin:0;background-color:#9ad075; } .container { width:100%; text-align:center; } .menuTitle { width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px; } .activeTitle { width:148px; height:25px; background-image:url(images/fold.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px; } .menuContent { background-color:#fff; margin:0 auto; height:auto; width:148px; text-align:left; display:none; } li { background:url(images/arr.gif) no-repeat 20px 6px ; list-style-type:none;padding:0px 0px 0px 38px; font-size:12.7px; height:20px; line-height:20px; } ul { margin:0;padding:0; }</style></head><body><div class="container"> <div class="menuTitle"> 資源庫 </div> <div class="menuContent"> <ul> <li> <a href="#">歡迎訪問</a></li> <li><a href="http://m.survivalescaperooms.com/"> 武林網 </a></li> <li><a href="http://m.survivalescaperooms.com/list/index_1.htm"> 網絡編程</a></li> </ul> </div> <div class="menuTitle"> 文章模塊 </div> <div class="menuContent"> <ul> <li> <a href="#">前端技術</a></li> <li> <a href="http://m.survivalescaperooms.com/list/list_21_1.htm">ASP.NET</a></li> <li> <a href="http://m.survivalescaperooms.com/list/index_104.htm">數據庫</a></li> </ul> </div> <div class="menuTitle"> 下載模塊 </div> <div class="menuContent"> <ul> <li> <a href="http://m.survivalescaperooms.com/">武林網 </a></li> <li> <a href="http://m.survivalescaperooms.com/codes/">源碼下載</a></li> <li> <a href="http://m.survivalescaperooms.com/books/">電子書籍</a></li> </ul> </div></div></body></html>以上就是為大家分享的jQuery樹形下拉菜單代碼，希望大家可以喜歡。
新聞熱點
疑難解答
