Javascript 滑动效果菜单 TreeView [Javascript]

简介:

前言

     这个滑动菜单写了蛮久了,当时没有被用上,现在要用了又翻出来了,毕竟不是网上下载扒的,自己写的,所以还是分享一下,觉得有时间还是尽量自己写的好,呵呵:)

 

正文

     还是先来一张效果图吧:

     

     效果一般,觉得还行,就是收缩的时候有时候抖,不太明白:-(

     以下是调用部分的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>

          1.     这个menu是DIV的id号,body里面加入<div id="menu"></div>就行了,注意给js加上defer,或者js代码放在div的后面也行。

          2.     目前实现的是点一个展开一个,不收缩其他栏目,收缩其他栏目的在TreeView.js里面也写好了,在展开或收缩之前调用noneExpand就行了

          3.     注意目前只适用于二级栏目的 :-(


本文转自over140 51CTO博客,原文链接:http://blog.51cto.com/over140/586553,如需转载请自行联系原作者

 

相关文章
|
7月前
|
JavaScript 前端开发 Python
分享77个JS菜单导航,总有一款适合您
分享77个JS菜单导航,总有一款适合您
44 0
|
7月前
|
JavaScript iOS开发 Python
分享114个JS菜单导航,总有一款适合您
分享114个JS菜单导航,总有一款适合您
69 0
|
7月前
|
移动开发 JavaScript 前端开发
分享113个JS菜单导航,总有一款适合您
分享113个JS菜单导航,总有一款适合您
81 0
|
7月前
|
移动开发 JavaScript 前端开发
分享111个JS菜单导航,总有一款适合您
分享111个JS菜单导航,总有一款适合您
157 0
|
JSON 前端开发 JavaScript
Element UI搭建首页导航和左侧菜单以及Mock.js和(组件通信)总线的运用
Element UI搭建首页导航和左侧菜单以及Mock.js和(组件通信)总线的运用
106 0
|
前端开发
【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错,Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js
【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错,Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js
120 0
|
7月前
|
JavaScript 前端开发 开发者
JavaScript——周技能检测——菜单编辑——2022年11月22日(考完)
JavaScript——周技能检测——菜单编辑——2022年11月22日(考完)
53 0
|
7月前
|
移动开发 JSON JavaScript
分享112个JS菜单导航,总有一款适合您
分享112个JS菜单导航,总有一款适合您
114 0
|
7月前
|
JSON JavaScript 前端开发
js(递归函数)实现树型菜单
js(递归函数)实现树型菜单
55 0
|
JSON JavaScript 前端开发
JS实现树形菜单递归函数(折叠菜单)
JS实现树形菜单递归函数(折叠菜单)
62 0