轻量级、常用的树状菜单结合自定义滚动条（原创）

所属分类：导航,UI-文件树,滚动

51277 344 查看评论 (10)

分享到微信朋友圈

查看演示立即下载

插件描述：本人在项目中实际应用总结出来的，非常实用的树状菜单，结合自定义美化滚动条，树状菜单项不换行，并根据内容的多少，适时出现滚动条。

更新时间：2018/1/10 下午3:09:40

更新说明：优化默认打开当前选中的菜单，在节点上添加class“ontree”,添加了以下代码

$(".ontree").each(function(){
    $(this).parents("ul").show();
    $(this).parents("ul").siblings().addClass("open_menu").removeClass("close_menu");
});

使用方法

第一步：按照demo的结构搭建html，具体应用时，自定义树状菜单在页面中的位置可调整

<div class="centent"></div>

的css；

第二步：引入tree.css和treescroll.min.js；

第三步：初始化菜单时按需要在相应的位置设置打开或者关闭，打开使用“open_menu”，关闭使用“close_menu”;

jquery时区选择插件timezone-picker

js动态树插件DynamicTree

jQuery文件树插件SimpleTree.js

jQuery文件树插件SimpleTree.js，代码少使用方便。

文件树

54273 333

基于bootstraptreeview无限分类树层级联动菜单

基于bootstraptreeview做的一个漂亮的无限分类树层级联动菜单

文件树

56428 386

dtree权限控制复选框插件

文件树

65065 494

纯javript实用多级目录树结构插件

aimaraJS是一款非常实用的纯javript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点，可以制作多级树结构，每个节点上可以都带有右键上下文菜单，并且每个节点上都

文件树

60275 353

讨论这个项目（10）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

始终难求 0

2019/4/28 18:35:00

强少1

2019/8/21 17:35:03

接口返回的数据格式可参照：1 {…}
name 城中区
count 6
id 1
sort 0
childrenList […]
0 {…}
name 城中街道
count 2
id 2
sort 0
childrenList []
1 {…}
2 {…}
3 {…}
4 {…}
5 {…}
以下是动态构造树状的方法：

function buildMenu(rdata) {
    var temp = '';
    $(rdata).each(function() {
        if (this.childrenList.length != 0) {
            temp += '<li><div class="close_menu"><span></span><a title="' + this.name + '"  id="' + this.id + '">' + this.name + '</a></div>';
            temp += '<ul  parentId="' + this.id + '"  parentName="' + this.name + '" style="display:none;">';
            temp += buildMenu(this.childrenList);
            temp += '</ul></li>';
        } else {
            temp += '<li><a title="' + this.name + '"  id="' + this.id + '">' + this.name + '</a></li>'
        }
    });
    return temp;
}