博客
关于我
基于jquery的简洁树形折叠菜单
阅读量:445 次
发布时间:2019-03-06

本文共 2926 字,大约阅读时间需要 9 分钟。

先上效果图:

最小的ul就是一个最小的树枝,空间允许时可无限扩展。html如下:

css如下:

div.panel:first-child {    margin-top:20px;}div.treeview {    min-width: 100px;    min-height: 100px;        max-height: 256px;    overflow:auto;        padding: 4px;        margin-bottom: 20px;        color: #369;        border: solid 1px;    border-radius: 4px;}div.treeview ul:first-child:before {    display: none;}.treeview, .treeview ul {    margin:0;    padding:0;    list-style:none;        color: #369;}.treeview ul {    margin-left:1em;    position:relative}.treeview ul ul {    margin-left:.5em}.treeview ul:before {    content:"";    display:block;    width:0;    position:absolute;    top:0;    left:0;    border-left:1px solid;    bottom:15px;}.treeview li {    margin:0;    padding:0 1em;    line-height:2em;    font-weight:700;    position:relative}.treeview ul li:before {    content:"";    display:block;    width:10px;    height:0;    border-top:1px solid;    margin-top:1px;    position:absolute;    top:1em;    left:0}.tree-indicator {    margin-right:5px;        cursor:pointer;}.treeview li a {    text-decoration: none;    color:inherit;        cursor:pointer;}.treeview li button, .treeview li button:active, .treeview li button:focus {    text-decoration: none;    color:inherit;    border:none;    background:transparent;    margin:0px 0px 0px 0px;    padding:0px 0px 0px 0px;    outline: 0;}

js如下:

$.fn.extend({    treeview:    function() {        return this.each(function() {            var tree = $(this);            tree.addClass('treeview-tree');            tree.find('li').each(function() {                var stick = $(this);            });            tree.find('li').has("ul").each(function () {                var branch = $(this); //li with children ul                branch.prepend(">");                branch.addClass('tree-branch');                branch.on('click', function (e) {                    if (this == e.target) {                        var icon = $(this).children('i:first');                        $(this).children().children().toggle();                    }                })                branch.children().children().toggle();                branch.children('.tree-indicator, button, a').click(function(e) {                    branch.click();                    e.preventDefault();                });            });        });    }});//调用$(window).on('load', function () {    $('.treeview').each(function () {        var tree = $(this);        tree.treeview();    })})

 

转载地址:http://ziufz.baihongyu.com/

你可能感兴趣的文章
MySQL 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>
MySQL 有什么优点?
查看>>
mysql 权限整理记录
查看>>
mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
查看>>
MYSQL 查看最大连接数和修改最大连接数
查看>>
MySQL 查看有哪些表
查看>>
mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
查看>>
MySql 查询以逗号分隔的字符串的方法(正则)
查看>>
MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
查看>>
mysql 查询,正数降序排序,负数升序排序
查看>>
MySQL 树形结构 根据指定节点 获取其下属的所有子节点(包含路径上的枝干节点和叶子节点)...
查看>>
mysql 死锁 Deadlock found when trying to get lock; try restarting transaction
查看>>