js实现无限级树形导航列表效果代码


Posted in Javascript onSeptember 23, 2015

本文实例讲述了js实现无限级树形导航列表效果代码。分享给大家供大家参考。具体如下:

这是一款js实现无限级树形下拉导航菜单,简洁实用,用到一个已封装好的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(images/user_23.gif) 5px 10px no-repeat;} 
 #nav.dyn li.open{ background:url(images/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"> 
<!-- 
sn={ 
 dynamicClass:'dyn', 
 showClass:'show', 
 parentClass:'parent', 
 openClass:'open', 
 navID:'nav', 
 init:function(){ 
 var triggerLink; 
 if(!document.getElementById || !document.createTextNode){return;} 
 var nav=document.getElementById(sn.navID); 
 if(!nav){return;} 
 DOMhelp.cssjs('add',nav,sn.dynamicClass);  
 var nested=nav.getElementsByTagName('ul'); 
 for(var i=0;i<nested.length;i++){ 
  triggerLink=nested[i].parentNode.getElementsByTagName('a')[0]; 
  DOMhelp.cssjs('add',triggerLink.parentNode,sn.parentClass);  
  DOMhelp.addEvent(triggerLink,'click',sn.changeSection,false); 
  triggerLink.onclick=DOMhelp.safariClickFix; 
  if(nested[i].parentNode.getElementsByTagName('strong').length>0){ 
  DOMhelp.cssjs('add',triggerLink.parentNode,sn.openClass);  
  DOMhelp.cssjs('add',nested[i],sn.showClass); 
  } 
 } 
 }, 
 changeSection:function(e){ 
 var t=DOMhelp.getTarget(e); 
 var firstList=t.parentNode.getElementsByTagName('ul')[0]; 
 if(DOMhelp.cssjs('check',firstList,sn.showClass)){ 
  DOMhelp.cssjs('remove',firstList,sn.showClass) 
  DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass); 
 } else { 
  DOMhelp.cssjs('add',firstList,sn.showClass) 
  DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass); 
 } 
 DOMhelp.cancelClick(e); 
 } 
} 
DOMhelp.addEvent(window,'load',sn.init,false); 
--> 
</script> 
<h2>js实现无限级树形导航列表</h2>
<ul id="nav"> 
 <li><a href="#">主页</a></li> 
 <li><a href="#">产品</a> 
 <ul> 
  <li><a href="#">大类别一</a> 
  <ul> 
   <li><a href="#">小类别一</a> 
   <ul> 
    <li><a href="#">次类别一</a></li> 
    <li><a href="#">次类别二</a></li> 
   </ul> 
   </li> 
   <li><a href="#">小类别二</a></li> 
  </ul> 
  </li> 
  <li><a href="#">大类别二</a></li> 
  <li><a href="#">大类别三</a> 
  <ul> 
   <li><a href="#">小类别一</a></li> 
   <li><a href="#">小类别二</a></li> 
  </ul> 
  </li> 
 </ul> 
 </li> 
 <li><a href="#">服务</a> 
 <ul> 
  <li><a href="#">大类别一</a></li> 
  <li><a href="#">大类别二</a></li> 
  <li><a href="#">大类别三</a></li> 
 </ul> 
 </li> 
 <li><a href="#">合作</a></li> 
 <li><a href="#">关于我们</a> 
 <ul> 
  <li><a href="#">大类别一</a> 
  <ul> 
   <li><a href="#">小类别一</a></li> 
   <li><a href="#">小类别二</a></li> 
  </ul> 
  </li> 
  <li><a href="#">大类别二</a> 
  <ul> 
   <li><a href="#">小类别一</a></li> 
   <li><a href="#">小类别二</a></li> 
  </ul> 
  </li> 
  <li><a href="#">大类别三</a> 
  <ul> 
   <li><a href="#">小类别一</a></li> 
   <li><a href="#">小类别二</a></li> 
  </ul> 
  </li> 
  <li><a href="#">大类别四</a></li> 
 </ul> 
 </li> 
 <li><a href="#">联系我们</a> 
 <ul> 
  <li><a href="#">大类别一</a></li> 
  <li><a href="#">大类别二</a></li> 
 </ul> 
 </li> 
</ul>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
小程序实现搜索框
Jun 19 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
浅谈JS的二进制家族
May 09 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 #Javascript
JS实现3D图片旋转展示效果代码
Sep 22 #Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 #Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 #Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 #Javascript
jQuery实现的经典滑动门效果
Sep 22 #Javascript
jquery实现的简单二级菜单效果代码
Sep 22 #Javascript
You might like
PHP VS ASP
2006/10/09 PHP
几个php应用技巧
2008/03/27 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
PHP线程的内存回收问题
2016/07/08 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
python导入时小括号大作用
2017/01/10 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python线程池threadpool实现篇
2018/04/27 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
利用python计算时间差(返回天数)
2019/09/07 Python
python中提高pip install速度
2020/02/14 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
学年末自我鉴定
2014/01/21 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
初三学生评语大全
2014/04/24 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
委托收款证明
2015/06/23 职场文书
酒店员工管理制度
2015/08/05 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书