树形 列表折叠效果
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的内容</title>
<meta charset="utf-8" />
<style>
div{float:left; height: 100px; line-height: 100px; }
#d1,#d3{ background-color: #ccff00; }
#d2{ cursor: pointer; background-color: #ffcc00; }
</style>
<script>
function toggle(d2){
//d2.innerHTML-->原文
// .textContent-->翻译后的字符
//如果d2的内容是<<
if(d2.innerHTML=="<<"){
// d2的内容改为>>
d2.innerHTML=">>";
// 找到旁边的d1，隐藏
document.querySelector("#d1").style.display="none";
}else{//否则
// d2的内容改为<<
d2.innerHTML="<<";
// 找到旁边的d1，显示出啦
document.querySelector("#d1").style.display="block";
}
}
</script>
</head>
<body>
<div id="d1">树形列表</div>
<div id="d2" onclick="toggle(this)"><<</div>
<div id="d3">内容的主体</div>
</body>
</html>
