JS implementation of infinite-level tree navigation list effect Code _JAVASCRIPT skills

The example of this article describes the implementation of JS infinite-level tree navigation list effect code. Share to everyone for your reference. Specifically as follows:

This is a JS to achieve an infinite level of tree-shaped drop-down navigation menu, concise and practical, with a good package of JS class, useful for you to draw on.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<meta http-equiv= "Content-type" content= "text/html; 
 Charset=utf-8 "/> <style type=" text/css "> *{margin:0; padding:0; 
 body {margin:20px;} 
 H2 {font-family: "blackbody"; 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 (!do Cument.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:nul
  L
  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, u
   Secapture);
  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 ', PARENTCL 
 Ass: ' 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>  

The

wants this article to help you with your JavaScript programming.