js implémente les compétences code_javascript d'effet de liste de navigation arborescente infinie

L'exemple de cet article décrit le code js pour implémenter l'effet d'une liste de navigation arborescente infinie. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'une implémentation js d'un menu déroulant d'arborescence infinie. Elle est simple et pratique. Elle utilise une classe JS encapsulée. Si vous la trouvez utile, vous pouvez en tirer des leçons.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-unlimit-tree-style-nav-list-codes/

Le code spécifique est le suivant :

<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)&#63;tempObj:false;
 },
 firstSibling:function(node){
  var tempObj=node.parentNode.firstChild;
  while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
   tempObj=tempObj.nextSibling;
  }
  return (tempObj.nodeType==1)&#63;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&#63;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&#63;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 &#63; window.event.srcElement : e &#63; 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)&#63;o.className.replace(c2,c1):o.className.replace(c1,c2);
   break;
   case 'add':
    if(!DOMhelp.cssjs('check',o,c1)){o.className+=o.className&#63;' '+c1:c1;}
   break;
   case 'remove':
    var rep=o.className.match(' '+c1)&#63;' '+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>

J'espère que cet article sera utile à la programmation JavaScript de chacun.