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>
<li>klass等模拟类</li>
</ul>
</li>
<li>jQuery、Bootstrap等框架</li>
<li>
<span>MV*</span>
<ul>
<li>代码分层</li>
<li>Angular.js</li>
<li>Backbone.js</li>
</ul>
</li>
<li>
<span>模块化</span>
<ul>
<li>AMD和Require.js</li>
<li>CMD和Sea.js</li>
<li>ES6 Harmony的模块</li>
</ul>
</li>
<li>
<span>DOM和BOM操作</span>
<ul>
<li>节点的增删查改</li>
<li>事件绑定与事件代理</li>
</ul>
</li>
<li>
<span>性能优化</span>
<ul>
<li>语法优化</li>
<li>AJAX缓存和备忘录模式</li>
<li>DOM操作优化</li>
<li>作用域链和原型链上的优化</li>
</ul>
</li>
<li>浏览器兼容性</li>
</ul>
</li>
<li>
<span>HTML</span>
<ul>
<li>文档类型Doctype</li>
<li>
<span>HTML5</span>
<ul>
<li>新增特性简述</li>
<li>WebSocket</li>
<li>Canvas</li>
<li>SVG</li>
<li>语义化元素及含义</li>
<li>LocalStorage和SessionStroage</li>
<li>WebRTC</li>
</ul>
</li>
<li>Cookie操作及限制</li>
<li>
<span>跨域</span>
<ul>
<li>JSONP实现</li>
<li>Post请求跨域</li>
<li>iframe通信</li>
</ul>
</li>
<li>
<span>HTTP</span>
<ul>
<li>
<span>常用响应码</span>
<ul>
<li>200</li>
<li>301、302、304</li>
<li>401、404</li>
<li>500</li>
</ul>
</li>
<li>首部</li>
<li>
<span>缓存相关</span>
<ul>
<li>ETag</li>
<li>cache-control</li>
<li>Exprires和Age</li>
<li>if-modified-since和if-none-match</li>
</ul>
</li>
</ul>
</li>
<li>常用的CDN</li>
<li>浏览器加载顺序</li>
<li>搜索引擎优化</li>
<li>优雅降级和渐进增强</li>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0