树形菜单是很常用的效果，常用在管理软件当中，但是一套树形菜单已经不能满足需求，所以如果能有一套比较全面的树形菜单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. 斐波拉契数列(Fibonacci) 的python实现方式

    第一种:利用for循环 利用for循环时,不涉及到函数,但是这种方法对我种小小白来说比较好理解,一涉及到函数就比较抽象了... >>> fibs = [0,1] >>&g ...

  2. Duplicate entry 'javajavajav' for key 'username'

    org.apache.ibatis.exceptions.PersistenceException: ### Error updating database.  Cause: com.mysql.jd ...

  3. Coursera上一个不错的Java课

    地址:https://www.coursera.org/learn/java-chengxu-sheji/home/welcome 复习天昏地暗,看点视频调剂一下.发现这个讲的还是很不错的.北大毕竟比 ...

  4. [LeetCode] Missing Ranges 缺失区间

    Given a sorted integer array where the range of elements are [0, 99] inclusive, return its missing r ...

  5. 2016 daily

    2016.01.06 leetcode 切题数达到 200+,截止目前 137.虽然一年 63 题看似不多,但是 easy 的题目基本已经切完,质量 >> 数量(专注 leetcode,可 ...

  6. mac 多php版本安装

    mac上自带又apache和php. 自带的php缺少一些扩展(freeType),安装起来因为mac本身有一些sudo su都不可触及的权限,所以决定不动系统本身php,再装一个新的php不同版本. ...

  7. 内核控制Meta标签：让360浏览器默认使用极速模式打开网页(转)

    为了让网站页面不那么臃肿,也懒的理IE了,同时兼顾更多的国内双核浏览器,在网页页头中添加了下面两行Meta控制标签. 1,网页头部加入 <meta name="renderer&quo ...

  8. Mysql操作语句

    MySQL中定义数据字段的类型对你数据库的优化是非常重要的. MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 数值类型 MySQL支持所有标准SQL数值数据类型. 这 ...

  9. Visual Stdio 无法直接启动带有“类库输出类型”的项目若要调试此项目，请在此解决方案中添加一个引用库项目的可执行项目。将这个可执行项目设置为启动项目！

    j解决方法:项目-属性-应用程序-输出类型-Windows应用程序

  10. 冰冻三尺非一日之寒--web来了

    第十四章    html  css 1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的:1. H ...