细分逻辑，就是子菜单区域的显示和隐藏，html标签中有个设置显示和隐藏的样式属性：display:none/block
通过js触发，来切换这个属性的值即可实现显示和隐藏效果了。
比如：
定义一个显示、隐藏的方法：
//隐藏
function hideSomething( elem ){
if( elem ){
elem.style.display="none"
}
}
//显示
function showSomething( elem ){
if( elem ){
elem.style.display="block"
}
}
如果你没有前端开发基础，可能有些麻烦，还需要学习一些基础内容。
一、首先定义一个JavaScript function，如下：function puckerMenu(level) {
var levelLength = ('row' + level).length
var toDo = '0'
for (var iCount = 0 iCount <document.all.lengthiCount++){
if ( document.all[iCount].id.indexOf('row' + level) >-1 &&( document.all[iCount].id.length >levelLength)) {
if ( document.all('level' + level).src.indexOf('minus.gif') >-1 ) {
document.all[iCount].style.display = 'none'
toDo = '1'
} else {
document.all[iCount].style.display = 'block'
toDo = '0'
}
}
}
if ( toDo == '1' ) {
document.all('level' + level).src = 'images/plus.gif'
} else {
document.all('level' + level).src = 'images/minus.gif'
}
}
二、然后在网页上定义一个div和一个ul，注意div中要包含一个id为level开头的image和一个onclick事件，ul中id要包含row，默认情况下是展开的，如果需要默认为闭合，则要在ul中加入style="display:none"
例子如下：
<body>
<divstyle="CURSOR: hand"
onclick="puckerMenu('1')"><IMGid=level1
src="images/minus.gif">public class DataAccess</div>
<ulid=row1>
<li>private string connString
<divstyle="CURSOR: hand"
onclick="puckerMenu('2')"><IMGid=level2
src="images /plus.gif">protected DbConnection OpenConnection()</div>
<ulid=row2style="display:none">{...}</ul>
<li>
Other
</ul>
</body>
1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，然后按下Crtl+S保存一下：
2、创建一个button按钮，给按钮设置一个id，名字设置为“myBT”，创建一个用来显示隐藏的div，将其id设置为“main”：
3、给div和button设置一些样式，为了美观好看，这里无需设置display，因为默认就是显示的：
4、编写js脚本，这里用到Jquery，给button添加一个点击事件，然后获取div的dom，判断dom中的display属性值，如果是“none”，就显示div，否则则隐藏:
5、全部完成后，按下crtl+s保存，来到编辑器的右侧，观察显示效果，此时div是显示的：
6、点击hide按钮，会发现div消失了，反复点击按钮会重复显示隐藏的效果，以上就是用JS控制div显示隐藏的案例：
