Looking for a lot of tree implementations on the Internet, I always feel that it is not satisfactory. Either you need to reference JS external files to use plug-ins, or too much code makes people dizzy. In fact, I just want to implement a tree with concise code and uncomplex logic. I don’t want to say much and just go to the code:
1. First write the CSS style, the header that must be written is first rendered
The code copy is as follows:
<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 main body of the page. This content can also be displayed dynamically (the dynamic display is easy to implement as long as it is based on the rules, so there is no need to say it. Smile)
The code copy is as follows:
<div id="sgc1">Password modification</div>
<div id="sgc2">Product selection</div>
<div id="sgc3" onclick="w('gc3')">Classification settings</div>
<div id="gc3" style="display:none">
<div id="sfgc91" onclick="k('fgc91')">Must See</div>
<div id="fgc91">
<div>Set MustSee Products</div>
</div>
<div id="sfgc93" onclick="k('fgc93')">Spotlight</div>
<div id="fgc93">
<div>Set Spotlight Products</div>
</div>
<div id="sfgc94" onclick="k('fgc94')">Daily Specials</div>
<div id="fgc94">
<div>Set DailySpecials Products</div>
</div>
<div id="sfgc95" onclick="k('fgc95')">HotCategory</div>
<div id="fgc95">
<div>Set HotCategory Classification</div>
<div>Set HotCategory Products</div>
</div>
<div id="sfgc96" onclick="k('fgc96')">Hot & Cool Picks</div>
<div id="fgc96">
<div>Set Hot & Cool Picks Products</div>
</div>
<div id="sfgc97" onclick="k('fgc97')">FeaturedCategorie</div>
<div id="fgc97">
<div>Set FeaturedCategories</div>
<div>Set FeaturedCategories</div>
</div>
<div id="sfgc98" onclick="k('fgc98')">You Might Also Like…</div>
<div id="fgc98">
<div>Set You Might Also Like…Category</div>
<div>Set You Might Also Like…Product</div>
</div>
</div>
<div id="sgc4" onclick="w('gc4')">System settings</div>
<div id="gc4" style="display:none">
<div>User Management</div>
</div>
3. The highlight is here, pay attention to the same shoes, and then implement the tree control of JS
The code copy is as follows:
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 example diagram is as follows: