The complete implementation method of JavaScript + CSS infinitus classification effect,

The complete implementation method of JavaScript + CSS infinitus classification effect,

This article describes the complete implementation of JavaScript + CSS infinitus classification. We will share this with you for your reference. The details are as follows:

CSS style:

A {text-decoration: none;} a, a: visited {color: #000; background: inherit;} body {margin: 0; padding: 20px; font: 12px tahoma,, sans-serif;} dt {font-size: 22px; font-weight: bold; margin: 0 0 0 15px;} dd {margin: 0 0 0 15px ;} h4 {margin: 0; padding: 0; font-size: 18px; text-align: center;} p {margin: 0; padding: 0 0 0 18px;} p, p a: visited {color: # 00f; background: inherit;}/* CNLTreeMenu Start */. CNLTreeMenu img. s {cursor: pointer; vertical-align: middle ;}. CNLTreeMenu ul {padding: 0 ;}. CNLTreeMenu li {list-style: none; padding: 0 ;}. closed ul {display: none ;}. child img. s {background: none; cursor: default ;}# CNLTreeMenu1 ul {margin: 0 0 17px ;}# CNLTreeMenu1 img. s {width: 20px; height: 15px;} # CNLTreeMenu1. opened img. s {background: url (skin1/opened.gif) no-repeat 0 0;} # CNLTreeMenu1. closed img. s {background: url (skin1/closed.gif) no-repeat 0 0;} # CNLTreeMenu1. child img. s {background: url (skin1/child.gif) no-repeat 3px 5px ;}# CNLTreeMenu2 ul {margin: 0 0 0 17px ;}# CNLTreeMenu2 img. s {width: 17px; height: 15px;} # CNLTreeMenu2. opened img. s {background: url (skin2/opened.gif) no-repeat 4px 6px;} # CNLTreeMenu2. closed img. s {background: url (skin2/closed.gif) no-repeat 3px 6px;} # CNLTreeMenu2. child img. s {background: url (skin2/child.gif) no-repeat 3px 5px ;}# CNLTreeMenu3 ul {margin: 0 0 0 17px ;}# CNLTreeMenu3 img. s {width: 34px; height: 18px;} # CNLTreeMenu3. opened img. s {background: url (skin3/opened.gif) no-repeat 0 1px;} # CNLTreeMenu3. closed img. s {background: url (skin3/closed.gif) no-repeat 0 1px;} # CNLTreeMenu3. child img. s {background: url (skin3/child.gif) no-repeat 13px 2px;}/* CNLTreeMenu End */* Temp CSS for View Demo */# CNLTreeMenu1, # CNLTreeMenu2, # CNLTreeMenu3 {float: left; width: 249px; border: 1px solid #99 BEEF; background: # D2E4FC; color: inherit; margin: 3px; padding: 3px;} # CNLTreeMenu1, # CNLTreeMenu2 {padding-bottom: 15px ;}. viewCode {clear: both; border: 1px solid # FFB900; background: # FFFFCC; color: inherit; margin: 3px; padding: 3px ;}. viewCode h6 {color: # 00f ;}

JavaScript code:

Function Ob (o) {var o = document. getElementById (o )? Document. getElementById (o): o; return o;} function Hd (o) {Ob (o ). style. display = "none";} function Sw (o) {Ob (o ). style. display = "";} function ExCls (o, a, B, n) {var o = Ob (o); for (I = 0; I <n; I ++) {o = o. parentNode;} o. className = o. className =? B: a;} function CNLTreeMenu (id, TagName0) {this. id = id; this. TagName0 = TagName0 = ""? "Li": TagName0; this. allNodes = Ob (this. id ). getElementsByTagName (TagName0); this. initCss = function (ClassName0, ClassName1, ClassName2, ImgUrl) {this. className0 = ClassName0; this. className1 = ClassName1; this. className2 = ClassName2; this. imgUrl = ImgUrl | "css/s.gif"; this. imgBlankA = " "; for (I = 0; I <this. allNodes. length; I ++) {this. allNodes [I]. className = ""? This. AllNodes [I]. className = ClassName1: ""; this. AllNodes [I]. innerHTML = (this. AllNodes [I]. className = ClassName2? This. ImgBlankB: this. ImgBlankA) + this. AllNodes [I]. innerHTML;} this. SetNodes = function (n) {var sClsName = n = 0? This. className0: this. className1; for (I = 0; I <this. allNodes. length; I ++) {this. allNodes [I]. className = this. className2? "": This. AllNodes [I]. className = sClsName ;}}}

HTML page:

<! -- CNLTreeMenu Start: --> <div class = "CNLTreeMenu" id = "CNLTreeMenu1"> 
I hope this article will help you design JavaScript programs.
Articles you may be interested in:

 

 
  
JS infinitus tree menu, general examples of json format and array format
 
  
Use js + jquery to achieve infinitus Linkage
 
  
Asp Method for unlimited classification js Edition
 
  
JavaScript code for implementing an infinitely hierarchical tree navigation list
 
  
JavaScript code for implementing infinitely-level web page folding menus (similar to tree menus)
 
  
Code for menu effects of an infinite tree structure implemented by json + jQuery
 
  
Implement unlimited select Association menu using javascript
 
  
Jquery-based infinite cascade drop-down box js plug-in