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

发布时间：2018-09-03 09:25:33 所属栏目：政策来源：站长网

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

　　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>
提示：可修改后代码再运行!

（编辑：新余站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!