还是先来一张效果图吧:
效果一般，觉得还行，就是收缩的时候有时候抖，不太明白:-(
以下是调用部分的JS代码，比较方便:
<
script type
=
"
text/javascript
"
defer
>
var tree = new TreeView( " tree " );
// -1标示顶层,唯一编号，文本内容，链接，是否显示(1显示 0不显示),弹出类型
tree.Nodes = [
[ - 1 , 1 , ' 基本信息 ' , ' # ' , 0 ,],
[ - 1 , 2 , ' 积分相关内容 ' , ' # ' , 1 ,],
[ 1 , 21 , ' 修改密码 ' , ' # ' ,,],
[ 1 , 22 , ' 重置密码 ' , ' # ' ,,],
[ 1 , 23 , ' 修改资料 ' , ' # ' ,,],
[ 1 , 24 , ' 修改详细资料 ' , ' # ' ,,],
[ 1 , 25 , ' 退出登录 ' , ' # ' ,,],
[ 2 , 11 , ' 积分规则 ' , ' # ' ,,],
[ 2 , 12 , ' 积分转盘 ' , ' # ' ,,],
[ 2 , 13 , ' 积分促销 ' , ' # ' ,,],
[ 2 , 14 , ' 常见问题 ' , ' # ' ,,],
[ 2 , 15 , ' 得分记录查询 ' , ' # ' ,,],
[ 2 , 16 , ' 消费记录查询 ' , ' # ' ,,],
[ 2 , 17 , ' 到期积分查询 ' , ' # ' ,,]
];
tree.Show(document.getElementById( " menu " ));
< / script>
var tree = new TreeView( " tree " );
// -1标示顶层,唯一编号，文本内容，链接，是否显示(1显示 0不显示),弹出类型
tree.Nodes = [
[ - 1 , 1 , ' 基本信息 ' , ' # ' , 0 ,],
[ - 1 , 2 , ' 积分相关内容 ' , ' # ' , 1 ,],
[ 1 , 21 , ' 修改密码 ' , ' # ' ,,],
[ 1 , 22 , ' 重置密码 ' , ' # ' ,,],
[ 1 , 23 , ' 修改资料 ' , ' # ' ,,],
[ 1 , 24 , ' 修改详细资料 ' , ' # ' ,,],
[ 1 , 25 , ' 退出登录 ' , ' # ' ,,],
[ 2 , 11 , ' 积分规则 ' , ' # ' ,,],
[ 2 , 12 , ' 积分转盘 ' , ' # ' ,,],
[ 2 , 13 , ' 积分促销 ' , ' # ' ,,],
[ 2 , 14 , ' 常见问题 ' , ' # ' ,,],
[ 2 , 15 , ' 得分记录查询 ' , ' # ' ,,],
[ 2 , 16 , ' 消费记录查询 ' , ' # ' ,,],
[ 2 , 17 , ' 到期积分查询 ' , ' # ' ,,]
];
tree.Show(document.getElementById( " menu " ));
< / script>
1. 这个menu是DIV的id号,body里面加入<div id="menu"></div>就行了，注意给js加上defer，或者js代码放在div的后面也行。
2. 目前实现的是点一个展开一个，不收缩其他栏目，收缩其他栏目的在TreeView.js里面也写好了，在展开或收缩之前调用noneExpand就行了
3. 注意目前只适用于二级栏目的 :-(
Demo下载地址:
本文转自博客园农民伯伯的博客，原文链接：Javascript 滑动效果菜单 TreeView [Javascript]，如需转载请自行联系原博主。
