Javascript (JS) TreeView 收缩展开
2014-05-05 15:08
351 查看
JS方法
Html代码
注:HTML代码中 div可换成其他标签,本人测试a、h1混用也可以。name可换成其他 如class 然后方法需调整为.className。只要记得将菜单放到id="tree"的div中就行。
IE通过
<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通过
相关文章推荐
- jQuery插件treeview点击节点名称不展开、收缩节点 分类: JavaScript 2014-06-16 20:28 539人阅读 评论(0) 收藏
- jQuery插件treeview点击节点名称不展开、收缩节点 分类: JavaScript 2014-06-16 20:28 540人阅读 评论(0) 收藏
- jQuery弹性展开收缩菜单插件gooey.js
- JavaScript设置FieldSet展开与收缩
- treeview的节点的展开和收缩
- JS仿QQ好友列表展开、收缩功能(第一篇)
- JS下拉列表动态收缩与展开
- JS收缩展开效果
- TreeView节点收缩与展开(二)
- js实现div层缓慢收缩与展开的方法
- 利用js实现图片展开与收缩
- JavaScript设置FieldSet展开与收缩
- JS实现段落的收缩与展开
- 在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
- js 展开&收缩 二种
- TreeView的TreeNode点击展示展开和收缩的效果
- JavaScript设置FieldSet展开与收缩
- javascript实现TreeView 无刷新展开的实例代码
- 【原】用使用JavaScript展开/折叠TreeView中所有节点(Expand and Collapse All Nodes of asp.net Treeview on the client with javascript)