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

发布时间：2018-09-05 22:43:53 所属栏目：创业来源：站长网

导读：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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网