您的位置:首页 > Web前端 > JavaScript

Javascript (JS) TreeView 收缩展开

2014-05-05 15:08 351 查看
JS方法
<script type="text/javascript">
function nodeClick(o){
var obj, disp, level, nsb
obj = event.srcElement;
if (obj != o){
if(obj.nextSibling != null){
if (obj.nextSibling){
disp = obj.nextSibling.style.display != "none" ? "none" : "block";
level = parseInt(obj.name.substring(1));
while (obj.nextSibling && parseInt((obj.nextSibling.name == null ? -1 : obj.nextSibling.name.substring(1))) > level) {
obj = obj.nextSibling;
obj.style.display = disp;
}
}
}
}
}
</script>

Html代码

<div id="tree" style="width:300px;height:450px;border:1px outset #EEEEEE;padding-top:2px;overflow-x:hidden;overflow-y:scroll;display:inline" onmouseover="javascript:var obj=event.srcElement;if(obj!=this)obj.style.backgroundColor='#f3f6ff';" onmouseout="javascript:var obj=event.srcElement;if(obj!=this)obj.style.backgroundColor='';" onclick="javascript:nodeClick(this)">
<div name="l1">
请选择部门
</div>
<div name="l2">
 申银万国
</div>
<div name="l3">
  经纪管理总部
</div>
<div name="l4">
   上海余姚国债
</div>
<div name="l4">
   上海新昌路证券营业部
</div>
<div name="l4">
   上海莘庄证券营业部
</div>
<div name="l4">
   上海中华路证券营业部
</div>
<div name="l4">
   上海瞿溪路营业部
</div>
<div name="l4">
   上海东体育会路营业部
</div>
<div name="l4">
   上海奉贤证券营业部
</div>
<div name="l4">
   上海福州路证券营业部
</div>
<div name="l4">
   上海余姚路证券营业部
</div>
<div name="l4">
   上海虹古路证券营业部
</div>
<div name="l4">
   上海龙茗路证券营业部
</div>
<div name="l4">
   上海金山证券营业部
</div>
<div name="l4">
   上海洛川东路营业部
</div>
<div name="l3">
  银证通部门
</div>
<div name="l4">
   银证通结算机构
</div>
<div name="l3">
  经纪管理总部
</div>
</div>




注:HTML代码中 div可换成其他标签,本人测试a、h1混用也可以。name可换成其他 如class 然后方法需调整为.className。只要记得将菜单放到id="tree"的div中就行。

IE通过
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息