您当前位置：首页 > web前端 > jquery > 基于 JQuery 制作的树形下拉菜单

基于 JQuery 制作的树形下拉菜单

来源：程序员人生发布时间：2014-02-22 22:35:49 阅读次数：3478次

　　网(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.wfuyu.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.wfuyu.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.wfuyu.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.wfuyu.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.wfuyu.com/news/" _fcksavedurl="http://www.wfuyu.com/news/" target="new">新闻资讯</a></li><li> <a href="http://www.wfuyu.com/website/" _fcksavedurl="http://www.wfuyu.com/website/" target="new">网站运营</a></li><li> <a href="http://www.wfuyu.com/design/" _fcksavedurl="http://www.wfuyu.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关注

栏目热点