使用ul-li的方式制作树形菜单,打开页面时只显示一级菜单,当单击某一级菜单时,显示二级菜单
<script>
/* document.getElementById("paneA").style.display="block";*/
function reveal(h4){
var ul = h4.parentNode.getElementsByTagName('ul')[0];
ul.style.display=ul.style.display=='block'?'none':'block'}
</script>
</head>
<body >
<ul id="one">
<li>
<h4 class="folder"onclick="reveal('this');">通俗小说</h4>
<ul id="paneA" >
<li >武侠小说</li>
<li >言情小说</li>
<li >奇幻小说</li>
</ul>
</li>
<li>
<h4 class="folder" onclick="reveal('this');">文学园地</h4>
<ul id="paneB" >
<li class="normal">诗词歌赋</li>
<li class="normal">散文杂文</li>
<li class="end">四书五经</li>
</ul>
</li>
<li>
<h4 class="folder" onclick="reveal('this');">历史轶事</h4>
<ul id="paneC">
<li class="normal">二十四史</li>
<li class="normal">世界通史</li>
<li class="end">近代中国</li>
</ul>
</li>
</ul>