With JavaScript to achieve a concise code logic is not complex multi level tree

  • 2020-03-30 03:03:07
  • OfStack

Find a lot of tree on the Internet to achieve, always feel unsatisfactory, either need to reference JS external file to use the plug-in, or the code is too much to let people see the dazzling, in fact, I just want to achieve a simple code, logic is not complex tree, direct on the code without saying more words:


1, first write the CSS style, this must be written to the head first render
 
<style> 
.ps{margin-left:10px;display:none;} 

.f { 
background: url("add.gif") no-repeat scroll -4px -21px; 
cursor: pointer; 
height: 35px; 
line-height: 37px; 
padding-left: 20px; 
} 
</style> 

2. Add the specific content of the tree to the body of the page, which can also be displayed dynamically (dynamic display is easy to implement as long as it is targeted at rules, which is needless to say.)
 
<div class="f" id="sgc1"> Password change </div> 
<div class="f" id="sgc2"> Product selection </div> 
<div class="f" id="sgc3" onclick="w('gc3')"> Classification Settings </div> 
<div class="ps" id="gc3" style="display:none"> 
<div id="sfgc91" class="f" onclick="k('fgc91')">Must See</div> 
<div class="ps" id="fgc91"> 
<div class="f"> Set up the MustSee goods </div> 
</div> 
<div id="sfgc93" class="f" onclick="k('fgc93')">Spotlight</div> 
<div class="ps" id="fgc93"> 
<div class="f"> Set up the Spotlight goods </div> 
</div> 
<div id="sfgc94" class="f" onclick="k('fgc94')">Daily Specials</div> 
<div class="ps" id="fgc94"> 
<div class="f"> Set up the DailySpecials goods </div> 
</div> 
<div id="sfgc95" class="f" onclick="k('fgc95')">HotCategory</div> 
<div class="ps" id="fgc95"> 
<div class="f"> Set up the HotCategory classification </div> 
<div class="f"> Set up the HotCategory goods </div> 
</div> 
<div id="sfgc96" class="f" onclick="k('fgc96')">Hot & Cool Picks</div> 
<div class="ps" id="fgc96"> 
<div class="f"> Set up the Hot & Cool Picks goods </div> 
</div> 
<div id="sfgc97" class="f" onclick="k('fgc97')">FeaturedCategorie</div> 
<div class="ps" id="fgc97"> 
<div class="f"> Set up the FeaturedCategorie classification </div> 
<div class="f"> Set up the FeaturedCategorie goods </div> 
</div> 
<div id="sfgc98" class="f" onclick="k('fgc98')">You Might Also Like ... </div> 
<div class="ps" id="fgc98"> 
<div class="f"> Set up the You Might Also Like ... classification </div> 
<div class="f"> Set up the You Might Also Like ... goods </div> 
</div> 
</div> 
<div class="f" id="sgc4" onclick="w('gc4')"> System Settings </div> 
<div class="ps" id="gc4" style="display:none"> 
<div class="f"> User management </div> 
</div> 

3, the emphasis is on, with the shoe attention, the next implementation of JS tree control
 
function w(vd) { 
var ob = document.getElementById(vd); 
if (ob.style.display == "block" || ob.style.display == "") { 
ob.style.display = "none"; 
var ob2 = document.getElementById('s' + vd); 
ob2.style.background = "url(add.gif) -4px -21px no-repeat"; 
} 
else { 
ob.style.display = "block"; 
var ob2 = document.getElementById('s' + vd); 
ob2.style.background = "url(add.gif) -4px 4px no-repeat;"; 
} 
} 
function k(vd) { 
var ob = document.getElementById(vd); 
if (ob.style.display == "block") { 
ob.style.display = "none"; 
var ob2 = document.getElementById('s' + vd); 
ob2.style.background = "url(add.gif) -4px -21px no-repeat"; 
} 
else { 
ob.style.display = "block"; 
var ob2 = document.getElementById('s' + vd); 
ob2.style.background = "url(add.gif) -4px 4px no-repeat;"; 
} 
} 

4. The running instance diagram is as follows:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405231505461.gif? 20144231566 ">

Related articles: