博客
关于我
基于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 分页语句 Limit原理
查看>>
MySql 创建函数 Error Code : 1418
查看>>
MySQL 创建新用户及授予权限的完整流程
查看>>
mysql 创建表,不能包含关键字values 以及 表id自增问题
查看>>
mysql 删除日志文件详解
查看>>
mysql 判断表字段是否存在,然后修改
查看>>
MySQL 到底能不能放到 Docker 里跑?
查看>>
mysql 前缀索引 命令_11 | Mysql怎么给字符串字段加索引?
查看>>
MySQL 加锁处理分析
查看>>
mysql 协议的退出命令包及解析
查看>>
mysql 参数 innodb_flush_log_at_trx_commit
查看>>
mysql 取表中分组之后最新一条数据 分组最新数据 分组取最新数据 分组数据 获取每个分类的最新数据
查看>>
MySQL 命令和内置函数
查看>>
mysql 四种存储引擎
查看>>
MySQL 在并发场景下的问题及解决思路
查看>>
MySQL 基础架构
查看>>
MySQL 基础模块的面试题总结
查看>>
MySQL 备份 Xtrabackup
查看>>
mYSQL 外键约束
查看>>