javascript 树形菜单效果

http://www.111com.net>

• 
  

  标题1

  
  
  
  
  • 内容1
  
  
  • 内容2
  
  
  • 内容3
  
  
  • 内容4
  
  
  • 
    

    标题1_1

    
    
    
    
    • 内容1_1
    
    
    • 内容1_2
    
    
    • 内容1_3
    
    
    • 内容1_4
    
    
    
    
  
  
  • 
    

    标题1_2

    
    
    
    
    • 内容1_1
    
    
    • 内容1_2
    
    
    • 内容1_3
    
    
    • 内容1_4
    
    
    
    
  
  
  
  

下面保存成js文件

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] == '+' ? '-':'+';
}
}