您當前位置：首頁 > web前端 > jquery > 基于 JQuery 制作的樹形下拉菜單

基于 JQuery 制作的樹形下拉菜單

來源：程序員人生發布時間：2014-02-22 22:35:49 閱讀次數：3671次

　　網(LieHuo.Net)教程自從學了會Jquery以后，越發覺得它好用了，看寫這樣一個帶點效果的菜單只需要短短的幾行代碼，換成是用純Javascript來寫的話不得要寫幾十行啊。希望對你有所幫助，因為老板覺得我之前做的菜單不好收，所以重新整一個讓他滿意的。

<!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=gb2312" /><title>基于 JQuery 制作的樹形下拉菜單-LIEHUO.NET</title><script type="text/javascript" src="http://www.jyygyx.com/uploads/common/js/jquery-1.4.2.min.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(http://www.jyygyx.com/uploads/soft/upadmin/Jquery_Menu/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(http://www.jyygyx.com/uploads/soft/upadmin/Jquery_Menu/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(http://www.jyygyx.com/uploads/soft/upadmin/Jquery_Menu/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="http://www.jyygyx.com/news/" _fcksavedurl="http://www.jyygyx.com/news/" target="new">新聞資訊</a></li><li> <a href="http://www.jyygyx.com/website/" _fcksavedurl="http://www.jyygyx.com/website/" target="new">網站運營</a></li><li> <a href="http://www.jyygyx.com/design/" _fcksavedurl="http://www.jyygyx.com/design/" target="new">網站設計</a></li></ul></div><div class="menuTitle">站長工具</div><div class="menuContent"><ul><li> <a href="http://tool.liehuo.net/baidu_google.php" _fcksavedurl="http://tool.liehuo.net/baidu_google.php" target="new">谷歌百度</a></li><li> <a href="http://tool.liehuo.net/shoulu/" _fcksavedurl="http://tool.liehuo.net/shoulu/" target="new">綜合收錄</a></li><li> <a href="http://tool.liehuo.net/pr/" _fcksavedurl="http://tool.liehuo.net/pr/" target="new">谷歌PR</a></li></ul></div><div class="menuTitle">論壇</div><div class="menuContent"><ul><li> <a href="http://forum.liehuo.net/forum-2-1.html" _fcksavedurl="http://forum.liehuo.net/forum-2-1.html" target="new">電腦數碼</a></li><li> <a href="http://forum.liehuo.net/forum-35-1.html" _fcksavedurl="http://forum.liehuo.net/forum-35-1.html" target="new">站長交流</a></li><li> <a href="http://forum.liehuo.net/forum-12-1.html" _fcksavedurl="http://forum.liehuo.net/forum-12-1.html" target="new">超級灌水</a></li></ul></div></div><br><br><br><br>如果不能正常運行，請按F5刷新即可。網LIEHUO.NET</body></html>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 MySQL修改并選取同一個表的方法

下一篇 SQL SERVER服務啟動后又停止了的完美解決方法

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

基于 JQuery 制作的樹形下拉菜單