博客
关于我
基于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 Timestamp时间隔了8小时
查看>>
Mysql tinyint(1)与tinyint(4)的区别
查看>>
mysql union orderby 无效
查看>>
mysql v$session_Oracle 进程查看v$session
查看>>
mysql where中如何判断不为空
查看>>
MySQL Workbench 使用手册:从入门到精通
查看>>
mysql workbench6.3.5_MySQL Workbench
查看>>
MySQL Workbench安装教程以及菜单汉化
查看>>
MySQL Xtrabackup 安装、备份、恢复
查看>>
mysql [Err] 1436 - Thread stack overrun: 129464 bytes used of a 286720 byte stack, and 160000 bytes
查看>>
MySQL _ MySQL常用操作
查看>>
MySQL – 导出数据成csv
查看>>
MySQL —— 在CentOS9下安装MySQL
查看>>
MySQL —— 视图
查看>>
mysql 不区分大小写
查看>>
mysql 两列互转
查看>>
MySQL 中开启二进制日志(Binlog)
查看>>
MySQL 中文问题
查看>>
MySQL 中日志的面试题总结
查看>>
mysql 中的all,5分钟了解MySQL5.7中union all用法的黑科技
查看>>