树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的JS树形菜单共享出来,相信你一定用得上。

一共包括八种,下面就一一介绍:

1、不同表现方式的JS树形菜单(如图所示)

2、复选框式的JS树形菜单(如图所示)
左图为只可以选择单节点,右图为在选择子节点的同时选择父节点

3、可以重新排列节点并且具有拖放功能的js树形菜单(如图所示)

4、带有提示框的js树形菜单(如图所示)

  如果想打开或关闭某个节点,将会弹出一个警告框;如果选中或取消某个菜单前的复选框,也会有相应的文字提示。这个功能目前还没有想到会在什么情况下使用,但是可以先了解一下。

5、将div菜单列表转换成树的js树形菜单(如图所示)

  左图为div菜单列表,右图为转换后的树。

6、可以异步加载数据的js树形菜单

7、可以添加和删除菜单的js树形菜单(如图所示)

包括添加子菜单和同级菜单两种。

8、展开关闭节点的js树形菜单(如图所示)

JS树形菜单的更多相关文章

  1. angular复选框式js树形菜单(二)

    删除(过滤)树形结构某一个子节点: function filterTreeData(treeData){ angular.forEach(treeData,function(item){ if (it ...

  2. angular复选框式js树形菜单(一)

    treeView.html <ul class="tree-view"> <li ng-repeat="item in treeData" n ...

  3. jquery树形菜单

    转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  4. Vue.js 递归组件实现树形菜单

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...

  5. JS——树形导航菜单(html的ul嵌套,jQuery的css(),show(),hide(),index()等方法)

    必备工具:jquery库文件.我这里用的是1.4版本的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  6. 用Vue.js递归组件构建一个可折叠的树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', {   template: `<!--Invoking myself! ...

  7. Vue.js递归组件实现动态树形菜单

    使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...

  8. java--css+js做的树形菜单(完整版)

    jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...

  9. 用JS写一个网站树形菜单

    先上效果图: 主体内容就是侧边展示的一二三级菜单,树形结构的. 前端页面布局内容,页面内容简单用ul li 来完成所有的罗列项.用先后顺序来区分一级二级三级: <body> <b&g ...

随机推荐

  1. Hemodynamic response function (HRF) - FAQ

    Source: MIT - Mindhive What is the 'canonical' HRF? The very simplest design matrix for a given expe ...

  2. AutoMapper的使用

    1.AutoMapper简单介绍 官网:http://automapper.org/ 源码:https://github.com/AutoMapper/AutoMapper NUGET安装: PM&g ...

  3. 配置VSCode右键菜单

    修改注册表,添加鼠标右键 选择文件 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\VSCode]@="Ope ...

  4. [LeetCode] Path Sum III 二叉树的路径和之三

    You are given a binary tree in which each node contains an integer value. Find the number of paths t ...

  5. [LeetCode] Find Median from Data Stream 找出数据流的中位数

    Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...

  6. [LeetCode] Department Highest Salary 系里最高薪水

    The Employee table holds all employees. Every employee has an Id, a salary, and there is also a colu ...

  7. FineUI(专业版)公测版发布(这速度,真TM快!)

    经过近一年的筹备.编码和测试,FineUI(专业版)公测版终于和大家见面了!现在就来体验一下专业版飞一般的速度吧:http://fineui.com/demo_pro/FineUI(专业版)首页:ht ...

  8. Ubuntu[1]安装Vesta Control Panel

    参考:http://www.5013.org/archives/819 1)登录 ssh ubuntu@139.199.9.173 ubuntu@139.199.9.173's password: 重 ...

  9. Mysql基本语句的总结

    1---------------创建一个表------------------------------------ drop table if exists 表名 create   table 表名( ...

  10. 【C#】菜单功能,将剪贴板JSON内容或者xml内容直接粘贴为类

    VS 2015菜单功能,将剪贴板JSON内容或者xml内容直接粘贴为类