首页 > 网站 > 实用代码 > 正文

js实现无限级树形导航列表

2024-09-05 12:20:34

字体：大中小

来源：转载

供稿：网友

js实现无限级树形下拉导航菜单，简洁实用，用到一个已封装好的JS类，有用的大家借鉴一下。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">     *{ margin:0; padding:0;    list-style:none;}     body { margin:20px;}     h2 { font-family:"黑体"; font-size:24px; text-align:center; line-height:32px;}     h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;}     #nav a { text-decoration:underline;color:#06c; font-size:14px; line-height:24px;}     #nav ul{ margin-bottom:5px;}     #nav strong{ color:#696;}     #nav.dyn li ul{ display:none;}     #nav.dyn li ul.show{ display:block;}     #nav.dyn li{ padding-left:15px;}     #nav.dyn li.parent{    background:url(/jscss/demoimg/201004/user_23.gif) 5px 10px no-repeat;}     #nav.dyn li.open{ background:url(/jscss/demoimg/201004/user_23.gif) 5px -34px no-repeat;}     </style> <script type="text/javascript">DOMhelp={	debugWindowId:'DOMhelpdebug',	init:function(){		if(!document.getElementById || !document.createTextNode){return;}	},	lastSibling:function(node){		var tempObj=node.parentNode.lastChild;		while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){			tempObj=tempObj.previousSibling;		}		return (tempObj.nodeType==1)?tempObj:false;	},	firstSibling:function(node){		var tempObj=node.parentNode.firstChild;		while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){			tempObj=tempObj.nextSibling;		}		return (tempObj.nodeType==1)?tempObj:false;	},	getText:function(node){		if(!node.hasChildNodes()){return false;}		var reg=/^/s+$/;		var tempObj=node.firstChild;		while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){			tempObj=tempObj.nextSibling;		}		return tempObj.nodeType==3?tempObj.nodeValue:false;	},	setText:function(node,txt){		if(!node.hasChildNodes()){return false;}		var reg=/^/s+$/;		var tempObj=node.firstChild;		while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){			tempObj=tempObj.nextSibling;		}		if(tempObj.nodeType==3){tempObj.nodeValue=txt}else{return false;}	},	createLink:function(to,txt){		var tempObj=document.createElement('a');		tempObj.appendChild(document.createTextNode(txt));		tempObj.setAttribute('href',to);		return tempObj;	},	createTextElm:function(elm,txt){		var tempObj=document.createElement(elm);		tempObj.appendChild(document.createTextNode(txt));		return tempObj;	},	closestSibling:function(node,direction){		var tempObj;		if(direction==-1 && node.previousSibling!=null){			tempObj=node.previousSibling;			while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){				 tempObj=tempObj.previousSibling;			}		}else if(direction==1 && node.nextSibling!=null){			tempObj=node.nextSibling;			while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){				 tempObj=tempObj.nextSibling;			}		}		return tempObj.nodeType==1?tempObj:false;	},	initDebug:function(){		if(DOMhelp.debug){DOMhelp.stopDebug();}		DOMhelp.debug=document.createElement('div');		DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId);		document.body.insertBefore(DOMhelp.debug,document.body.firstChild);	},	setDebug:function(bug){		if(!DOMhelp.debug){DOMhelp.initDebug();}		DOMhelp.debug.innerHTML+=bug+'/n';	},	stopDebug:function(){		if(DOMhelp.debug){			DOMhelp.debug.parentNode.removeChild(DOMhelp.debug);			DOMhelp.debug=null;		}	},	getKey:function(e){		if(window.event){	      var key = window.event.keyCode;	    } else if(e){	      var key=e.keyCode;	    }		return key;	},/* helper methods */	getTarget:function(e){		var target = window.event ? window.event.srcElement : e ? e.target : null;		if (!target){return false;}		while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){			target=target.parentNode;		}		return target;	},	stopBubble:function(e){		if(window.event && window.event.cancelBubble){			window.event.cancelBubble = true;		} 		if (e && e.stopPropagation){			e.stopPropagation();		}	},	stopDefault:function(e){		if(window.event && window.event.returnValue){			window.event.returnValue = false;		} 		if (e && e.preventDefault){			e.preventDefault();		}	},	cancelClick:function(e){		if (window.event){			window.event.cancelBubble = true;			window.event.returnValue = false;		}		if (e && e.stopPropagation && e.preventDefault){			e.stopPropagation();			e.preventDefault();		}	},	addEvent: function(elm, evType, fn, useCapture){		if (elm.addEventListener){			elm.addEventListener(evType, fn, useCapture);			return true;		} else if (elm.attachEvent) {			var r = elm.attachEvent('on' + evType, fn);			return r;		} else {			elm['on' + evType] = fn;		}	},	cssjs:function(a,o,c1,c2){		switch (a){			case 'swap':				o.className=!DOMhelp.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);			break;			case 'add':				if(!DOMhelp.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}			break;			case 'remove':				var rep=o.className.match(' '+c1)?' '+c1:c1;				o.className=o.className.replace(rep,'');			break;			case 'check':				var found=false;				var temparray=o.className.split(' ');				for(var i=0;i<temparray.length;i++){					if(temparray[i]==c1){found=true;}				}				return found;			break;		}	},    safariClickFix:function(){      return false;    }}DOMhelp.addEvent(window, 'load', DOMhelp.init, false);</script> <script type="text/javascript">  </script> <h2>js实现无限级树形导航列表</h2><ul id="nav">     <li>主页</li>     <li>产品         <ul>             <li>大类别一                 <ul>                     <li>小类别一                         <ul>                             <li>次类别一</li>                             <li>次类别二</li>                         </ul>                     </li>                     <li>小类别二</li>                 </ul>             </li>             <li>大类别二</li>             <li>大类别三                 <ul>                     <li>小类别一</li>                     <li>小类别二</li>                 </ul>             </li>         </ul>     </li>     <li>服务         <ul>             <li>大类别一</li>             <li>大类别二</li>             <li>大类别三</li>         </ul>     </li>     <li>合作</li>     <li>关于我们         <ul>             <li>大类别一                 <ul>                     <li>小类别一</li>                     <li>小类别二</li>                 </ul>             </li>             <li>大类别二                 <ul>                     <li>小类别一</li>                     <li>小类别二</li>                 </ul>             </li>             <li>大类别三                 <ul>                     <li>小类别一</li>                     <li>小类别二</li>                 </ul>             </li>             <li>大类别四</li>         </ul>     </li>     <li>联系我们         <ul>             <li>大类别一</li>             <li>大类别二</li>         </ul>     </li> </ul>

上一篇：论坛上的鼠标感应菜单，带阴影

下一篇：CSS Tab简洁版，切换标签

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注