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.