jquery实现树形可折叠树状图图表效果代码-html代码-BFW代码库

jquery实现树形可折叠树状图图表效果代码

代码语言：html

所属分类：图表

代码描述：jquery实现树形可折叠树状图图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">



    <style>
        html, body {margin: 0; padding: 0; height: 100%; width: 100%; background-color: #f0f0f0; }
        		.wrapper {font-family: "Microsoft YaHei",monospace,sans-serif; width: 90%; margin: auto; }
        		.tree {}
        		.tree > ul > li:before,
        		.tree > ul > li:after{display: none; }
        		.tree li {position: relative; list-style: none; margin: 0; padding: .5em 1em; color: #16a085; }
        			.tree li:before,
        			.tree li:after {content: ""; position: absolute; left: -.1em; top: -1.1em; width: 1em; }
        			.tree li:before{height: 2.3em; border-bottom: 2px solid #16a085; }
        			.tree li:after{height: 100%; border-left: 2px solid #16a085; }
        			.tree li:nth-child(1):before{height: 1em; top: .2em; }
        			.tree li:last-child:after{height: 2.3em; }
        		.tree span {position: relative; z-index: 1; padding: .2em .5em .2em 1em; border-radius: .5em; background-color: #16a085; color: white; cursor: pointer; }
        			.tree span i{margin-left: .5em; }
    </style>


</head>

<body>
    <div class="wrapper">
        <div class="tree">
            <ul>
                <li>
                    <span>JavaScript</span>
                    <ul>
                        <li>
                            <span>语言基础</span>
                            <ul>
                                <li>原型链</li>
                                <li>作用域链和闭包</li>
                                <li>this</li>
                                <li>AJAX和Promise/Deferred</li>
                                <li>数组操作</li>
                            </ul>
                        </li>
                        <li>
                            <span>类与继承</span>
                            <ul>
                                <li>Object.create</li>
                     .........完整代码请登录后点击上方下载按钮下载查看