《JavaScript+CSS实现的可折叠二级菜单实例_.docx》由会员分享，可在线阅读，更多相关《JavaScript+CSS实现的可折叠二级菜单实例_.docx（12页珍藏版）》请在三一文库上搜索。
1、JavaScript+CSS实现的可折叠二级菜单实例_ 本文实例讲解并描述了JavaScript+CSS实现的可折叠二级菜单。分享给大家供大家参考，具体如下： .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=serve
2、r title无标题页/title script type=text/javascript src=JScript.js /script style type=text/css * margin: 0px; padding: 0px; border:0px; #nav width: 200px; margin: 0px; padding: 0px; font-size: 14px; line-height: 30px; #nav li width: 180px; padding-left: 20px; padding-bottom: 1px; list-style-image: none; l
3、ist-style-type: none; background-color: #FFFFFF; float: left; #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;
4、 #nav ul a background-color: #EBEBEB; .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(
5、this)菜单1/a ul lia href=javascript:void(0);菜单1_1/a/li lia href=javascript:void(0);菜单1_2/a/li /ul /li lia href=javascript:void(0); onclick=doMenu(this)菜单2/a ul lia href=javascript:void(0);菜单2_1/a/li lia href=javascript:void(0);菜单2_2/a/li /ul /li lia href=javascript:void(0); onclick=doMenu(this)菜单3/a u
6、l lia href=javascript:void(0);菜单3_1/a/li lia href=javascript:void(0);菜单3_2/a/li /ul /li /ul /div /form /body /html js文件： function doMenu(obj) var items=obj.parentNode.getElementsByTagName(ul); var itmUl; if(items.length0) itmUl=items0; if(itmUl.className!=ex) cxAll(); itmUl.className=ex; else itmUl.
7、className=cx; function statUp() cxAll(); function cxAll() var ulDom=document.getElementById(nav); var items=ulDom.getElementsByTagName(ul); for (var i=0;iitems.length;i+) itemsi.className=cx; 在这里需要留意的是延迟加载的问题，由于页面加载时需要执行预处理操作statUp()方法，js单独写成一个文件或 js写在head节点中时，需要用法window.onload=function()执行语句; 延迟加载，
8、不然引用DOM中对象时，会消失缺少对象 错误提示。 别一种解决方法，挺直将全部javaScript 写在/html !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN l1/DTD/xhtml1-transitional.dtd html xmlns=l head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title菜单/title script type=text/javascript src=Untitled-3.js/script styl
9、e * margin: 0px; padding: 0px; border:0px; #nav width: 200px; 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; background-color: #FFFFFF; float: left; #nav a padding-left: 20px
10、; 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; .cx display:none; visibility:hidden; .ex display:
11、inherit; visibility:inherit; /style /head body div id=Parent ul id=nav lia href=javascript:void(0); onclick=doMenu(this)菜单1/a ul lia href=javascript:void(0);菜单1_1/a/li lia href=javascript:void(0);菜单1_2/a/li /ul /li lia href=javascript:void(0); onclick=doMenu(this)菜单2/a ul lia href=javascript:void(0)
12、;菜单2_1/a/li lia href=javascript:void(0);菜单2_2/a/li /ul /li lia href=javascript:void(0); onclick=doMenu(this)菜单3/a ul lia href=javascript:void(0);菜单3_1/a/li lia href=javascript:void(0);菜单3_2/a/li /ul /li /ul /div /body /html script type=text/javascript function doMenu(obj) var items=obj.parentNode.ge
13、tElementsByTagName(ul); var itmUl; if(items.length0) itmUl=items0; if(itmUl.className!=ex) cxAll(); 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; statUp(); /script 盼望本文所述对大家JavaScript程序设计有所关心。 .