《JS三级可折叠菜单实现方法_》由会员分享，可在线阅读，更多相关《JS三级可折叠菜单实现方法_（7页珍藏版）》请在金锄头文库上搜索。
1、JS三级可折叠菜单实现方法_ 本文实例讲解并描述了JS三级可折叠菜单实现方法。分享给大家供大家参考，具体如下： .ASPX代码： % Page Language=C# AutoEventWireup=true CodeFile=NavigateMenu.aspx.cs Inherits=NavigateMenu % !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN l1/DTD/xhtml1-transitional.dtd html xmlns=l head runat=server title无标题页/title script
2、 type=text/javascript src=JScript.js /script style type=text/css * margin: 0px; padding: 0px; border:0px; #nav width: 600px; margin: 0px; padding: 0px; font-size: 14px; line-height: 30px; #nav li width: 180px; padding-left: 20px; padding-bottom: 1px; list-style-image: none; list-style-type: none; ba
3、ckground-color: #FFFFFF; #nav a padding-left: 20px; background-color: #BFBFBF; display: block; text-decoration: none; #nav a:hover background-color: #FF9175; #nav li ul padding-top: 1px; list-style-image: none; list-style-type: none; #nav li li padding-left: 0px; #nav ul a background-color: #EBEBEB;
4、 .cx display:none; visibility:hidden; .ex display:inherit; visibility:inherit; /style script type=text/javascript window.onload=function() statUp(); /script /head body form id=form1 runat=server div id=Parent ul id=nav lia href=javascript:void(0); onclick=doMenu(this,1)菜单1/a ul lia href=javascript:v
5、oid(0);菜单1_1/a/li lia href=javascript:void(0);菜单1_2/a/li /ul /li lia href=javascript:void(0); onclick=doMenu(this,1)菜单2/a ul lia href=javascript:void(0); onclick=doMenu(this,2) 菜单2_1/a ul li菜单2_1_1/li li菜单2_1_2/li /ul /li lia href=javascript:void(0); onclick=doMenu(this,2)菜单2_2/a ul li菜单2_2_1/li /ul
6、 /li /ul /li /ul /div /form /body /html js文件代码： function doMenu(obj,strDeep) var items=obj.parentNode.getElementsByTagName(ul); /猎取a 对象你节点li 下包含的 全部ul集合 var itmUl; var deeps=strDeep; /strDeep 为当前菜单的级数 if(items.length0) itmUl=items0; alert(itmUl); if(itmUl.className!=ex) cxAll();/当前节点为关闭状态时,先执行关闭全部ul
7、子菜单 if(deeps=2) /若要绽开三级菜单当,还要将其二级父菜单绽开 itmUl.parentNode.parentNode.className=ex; itmUl.className=ex; /绽开下级菜单 else itmUl.className=cx; function statUp() cxAll(); var ulDom=document.getElementById(nav); var items=ulDom.getElementsByTagName(ul); function cxAll() var ulDom=document.getElementById(nav); var items=ulDom.getElementsByTagName(ul); for (var i=0;iitems.length;i+) itemsi.className=cx; 盼望本文所述对大家JavaScript程序设计有所关心。 .
