jQuery多级折叠(树形)菜单，动态展开和收缩

　　jQuery多级折叠(树形)菜单，动态展开和收缩。所有的元素以ul li ul li ul li的循环格式嵌套如果没有下级分类就用li a结束嵌套，代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!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="/uploads/common/js/jquery-1.4.2.min.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="#">一级菜单</a> <ul class="child"> <li> <a href="#">二级菜单</a> </li> <li> <a href="#">二级菜单</a> <ul class="child"> <li> <a href="#">三级菜单</a> </li> <li> <a href="#">三级菜单</a> </li> </ul> </li> <li> <a href="#">二级菜单</a> <ul class="child"> <li> <a href="#">三级菜单</a> </li> <li> <a href="#">三级菜单</a> <ul class="child"> <li> <a href="">四级菜单</a> </li> <li> <a href="">四级菜单</a> </li> <li> <a href="">四级菜单</a> <ul class="child"> <li> <a href="">五级菜单</a> </li> <li> <a href="">五级菜单</a> </li> <li> <a href="">五级菜单</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li>  <li> <a href="#">一级菜单</a> <ul class="child"> <li> <a href="#">二级菜单</a> </li> <li> <a href="#">二级菜单</a> </li> </ul> </li> <li> <a href="#">一级菜单</a> <ul class="child"> <li> <a href="#">二级菜单</a> </li> <li> <a href="#">二级菜单</a> </li> </ul> </li> <li> <a href="#">一级菜单</a> </li> </ul> </div> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

热点

jQuery多级折叠(树形)菜单，动态展开和收缩

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

jQuery多级折叠(树形)菜单，动态展开和收缩

由 dawei

相关文章

加盟社区邦，让家政创业更简单，社区邦家政创业招商会成功举办！

大众创业的2.0版本，百度智能小程序创业经营大赛正式启动

2021“创客广东”工业互联网中小企业创新创业大赛圆满收官

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性