bootstrap 树
http://jsfiddle.net/jhfrench/GpdgF/
把原文的i标签中的图标显示出来;
源码:
<div class="tree well"><ul><li><span><iclass="glyphicon glyphicon-folder-open"></i> Parent</span> <ahref="">Goes somewhere</a><ul><li><span><i class="glyphicon glyphicon-minus"></i>Child</span><a href="">Goes somewhere</a><ul><li><span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span> <a href="">Goes somewhere</a></li></ul></li></ul></li><li><span><i class="icon-folder-open"></i> Parent2</span> <ahref="">Goes somewhere</a><ul><li><span><i class="icon-leaf"></i> Child</span> <ahref="">Goes somewhere</a></li></ul></li></ul></div>
css:
.tree {min-height:20px;padding:19px;margin-bottom:20px;background-color:#fbfbfb;border:1px solid #999;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05) } .tree li {list-style-type:none;margin:0;padding:10px 5px 0 5px;position:relative } .tree li::before, .tree li::after {content:'';left:-20px;position:absolute;right:auto } .tree li::before {border-left:1px solid #999;bottom:50px;height:100%;top:0;width:1px } .tree li::after {border-top:1px solid #999;height:20px;top:25px;width:25px } .tree li span {-moz-border-radius:5px;-webkit-border-radius:5px;border:1px solid #999;border-radius:5px;display:inline-block;padding:3px 8px;text-decoration:none } .tree li.parent_li>span {cursor:pointer } .tree>ul>li::before, .tree>ul>li::after {border:0 } .tree li:last-child::before {height:30px } .tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {background:#eee;border:1px solid #94a0b4;color:#000 }
js:
$(function() {$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title','点击收缩');$('.tree li.parent_li > span').on('click',function(e) {var children = $(this).parent('li.parent_li').find(' > ul > li');if (children.is(":visible")) {children.hide('fast');$(this).attr('title', '点击展开').find(' > i').addClass('glyphicon-plus').removeClass('glyphicon-minus');} else {children.show('fast');$(this).attr('title', '点击收缩').find(' > i').addClass('glyphicon-minus').removeClass('glyphicon-plus');}e.stopPropagation();}); });
转载于:https://www.cnblogs.com/stono/p/4251838.html
bootstrap 树相关推荐
- Bootstrap树控件(Tree控件组件)使用经验分享
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...
- JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...
- bootstrap树状图
这是我根据bootstrap的折叠设计的树状图显示,只有二级显示,可以用在简单的目录等 右端可以再次修改,显示为滑动块 - 引用部分 <meta charset="utf-8" ...
- bootstrap树节点如何设置默认不展开_我开源了一个基于Vue的组织架构树组件
开门见山 Demo 演示地址:http://www.longstudy.club/vue... github 地址:https://github.com/qq44924588... 项目背景 因为最近 ...
- bootstrap树节点如何设置默认不展开_GraPhlAn:最美进化树或层级分类树学习笔记
Graphlan可视化进化树 撰文:文涛 南京农业的大学 责编:刘永鑫 中科院遗传发育所 GraPhlAn简介 总体来讲,Graphlan是一个可视化进化树和基于分类等级绘制层级分类树的工具.可以制作 ...
- (转)C#进阶系列——WebApi 接口返回值不困惑:返回值类型详解
原文链接:https://www.cnblogs.com/landeanfen/p/5501487.html 阅读目录 一.void无返回值 二.IHttpActionResult 1.Json(T ...
- 知识累积——这些年写过的博文(博客目录索引)
阅读目录 一.JavaScript系列 1.Bootstrap组件系列 2.JavaScript效果系列 3.JavaScript组件扩展与封装 4.Knockout组件系列 5.Vue组件系列 二. ...
- bootstrap- 行内编辑
懒得安分 每一次想到未来掌握在自己手中,就忍不住笑了~~ 项目合作,联系博主!技术交流,欢迎加群!群一.二.三.四.五.六已满!群七(前端):647134285:群八(后端):702549620. ...
- [Quant][Note] Empirical Asset Pricing via Machine Learning
题目 Empirical Asset Pricing via Machine Learning 论文链接 论文pdf链接 发表时间 2018.09.04 论文作者 Shihao Gu, Bryan K ...
最新文章
- 安装python,如果让升级版本的话
- curl 慢 不稳定_慢病毒包装步骤及注意事项
- sqlite DLL load failed
- NIO详解(九):Selector详解
- 动画--过渡属性 transition-property
- 常用于生产部署方式详解 灰度发布 滚动发布 蓝绿发布
- 编写一个程序求输入字符串的长度
- 如何双启动Linux和Windows
- Java Web项目 配置 ueditor心得
- 什么样的人适合做自动化测试
- 浅谈测试管理—兵者诡道也
- 无线射频识别的应用方案有哪些?
- ctrlaltdel命令手册
- dede标签使用大全
- 如何建立有效的激励机制
- 压敏电阻特点,与普通电阻有什么不同?
- java学习(一)概述
- 面试以前上司,能力一般,不想给他通过,但他卑微哀求,怎么办?
- python太阳花代码_python太阳花绘制代码教程
- 往DAO类中注入@PersistenceContext和@Resource的区别
热门文章
- 更改mysql数据库存储引擎_MySQL更改数据库表的存储引擎
- c语言 怎么把数据存储,急求如何将下列C语言程序数据存储到文件中?
- oracle 物料属性批次过期,物料批次特性值
- 把计算机怎么连接手机的网络助手在哪里,手机连接电脑上网,详细教您手机如何连接电脑上网...
- 6 redis 编译失败_Redis6 Windows 版本编译
- 系统学习NLP(二十七)--EMLo
- 拉普拉斯变换公式表_工程数学中的积分变换的总结
- data的值 如何初始化vue_【Vue 原理】Vue 是如何代理 data、methods 和 props 的?
- vaex 处理海量数据_爱了爱了!0.052 秒打开 100GB 数据,这个Python开源库火爆了!...
- spark 过滤log