Using JavaScript to achieve a simple code, logic is not complex multilevel tree _javascript skills

Find a lot of trees on the internet to achieve, the total feeling is not satisfactory, not the need to reference JS external files using Plug-ins, is the code too much to see the dizzy, in fact, I just want to implement a simple code, logic is not complex tree, crap not to say more directly on the code:


1, first write the CSS style, the required to write the first rendering of the head

Copy Code code 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, in the page body to add the specific content of the tree, this content can also be dynamic display (dynamic display as long as the rule is very good to achieve, it is needless to say that the laugh)

Copy Code code as follows:

<div class= "F" id= "SGC1" > Password modification </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 Mustsee product </div>
</div>
<div id= "sfgc93" class= "F" onclick= "K (' fgc93 ')" >Spotlight</div>
<div class= "PS" id= "fgc93" >
<div class= "F" > Set Spotlight Product </div>
</div>
<div id= "sfgc94" class= "F" onclick= "K (' fgc94 ')" >daily specials</div>
<div class= "PS" id= "fgc94" >
<div class= "F" > Set Dailyspecials product </div>
</div>
<div id= "sfgc95" class= "F" onclick= "K (' fgc95 ')" >HotCategory</div>
<div class= "PS" id= "fgc95" >
<div class= "F" > set Hotcategory classification </div>
<div class= "F" > Set Hotcategory product </div>
</div>
<div id= "sfgc96" class= "F" onclick= "K (' fgc96 ')" >hot & Cool Picks</div>
<div class= "PS" id= "fgc96" >
<div class= "F" > Set hot & Cool Picks Products </div>
</div>
<div id= "sfgc97" class= "F" onclick= "K (' fgc97 ')" >FeaturedCategorie</div>
<div class= "PS" id= "fgc97" >
<div class= "F" > set Featuredcategorie classification </div>
<div class= "F" > Set Featuredcategorie product </div>
</div>
<div id= "sfgc98" class= "F" onclick= "K (' fgc98 ')" >you might Also like...</div>
<div class= "PS" id= "fgc98" >
<div class= "F" > Set your might Also like ... Classification </div>
<div class= "F" > Set your might Also like ... Products </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 play came, the same shoes attention, next to achieve the tree-shaped JS control

Copy Code code 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, run the example diagram as follows: