Above is the effect picture.
Html
| The code is as follows |
Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
Http://www.111cn.net>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<style type= "Text/css" >
body{font-size:12px;}
h2,h3{margin:0;}
ul{margin:0; padding:0; list-style:none;}
#outer_wrap li{padding-left:30px; line-height:24px;}
. controlsymbol{padding:0 5px; border:1px solid #adff2f; cursor:pointer;
</style>
<body>
<ul id= "Outer_wrap" >
<li>
<ul>
<li> content 1</li>
<li> content 2</li>
<li> content 3</li>
<li> content 4</li>
<li>
<ul>
<li> content 1_1</li>
<li> content 1_2</li>
<li> content 1_3</li>
<li> content 1_4</li>
</ul>
</li>
<li>
<ul>
<li> content 1_1</li>
<li> content 1_2</li>
<li> content 1_3</li>
<li> content 1_4</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
The following is saved as a JS file
var innertext = Document.innertext? ' innertext ': ' Textcontent ';
var span = document.createelement (' span ');
Span[innertext] = '-';
Span.classname = ' Controlsymbol ';
function $ (ID) {
return document.getElementById (ID);
}
function $_ () {
var args = arguments;
var ret = [];
for (var i = 0; i < args.length; i++) {
var temp = document.getElementsByTagName (args[i]);
try{
ret = Ret.concat (Array.prototype.slice.call (temp,0));
}catch (e) {
for (var j = 0; J < Temp.length; J + +) {
Ret.push (Temp[j]);
}
}
}
return ret;
}
function AddSymbol (h) {
var Innerspan = Span.clonenode (true);
H.insertbefore (Innerspan,h.firstchild);
}
Function Next (EL) {
while (el.nextsibling) {
if (El.nextSibling.nodeType = = 1) {
return el.nextsibling;
}
el = el.nextsibling;
}
return null;
}
var outerwrap = $ (' outer_wrap ');
var hs = $_ (' h2 ', ' H3 ');
for (var i = 0; i < hs.length; i++) {
AddSymbol (Hs[i]);
}
Outerwrap.onclick = function (event) {
Event = Event | | window.event;
var t = Event.target | | Event.srcelement;
if (T.classname = = ' Controlsymbol ') {
var sn = next (T.parentnode);
var Snstyle = Next (t.parentnode). style;
Snstyle.display = (Snstyle.display = = ' block ' | | snstyle.display = = ')? ' None ': ' Block ';
T[innertext] = t[innertext] = = ' + '? '-':'+';
}
} |
The article is very simple, there is a need for friends to see this JS tree-shaped menu effect
