基于jquery的简洁树形折叠菜单
先上效果图:
最小的ul就是一个最小的树枝,空间允许时可无限扩展。html如下:
<div class="panel panel-default">
<div class="panel-body"> <ul class="treeview">
<li><a href="#">Tree</a>
<ul>
<li><a href="#">Branch</a></li>
<li><a href="#">Branch</a>
<ul>
<li><a href="#">Stick</a></li>
<li><a href="#">Stick</a></li>
<li><a href="#">Stick</a>
<ul>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a>
<ul>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
</ul>
</li>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a></li>
</ul>
</li>
<li><a href="#">Stick</a></li>
</ul>
</li>
<li><a href="#">Branch</a></li>
<li><a href="#">Branch</a></li>
</ul>
</li>
</ul> </div>
</div>
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:;
padding:;
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:;
position:absolute;
top:;
left:;
border-left:1px solid;
bottom:15px;
}
.treeview li {
margin:;
padding:0 1em;
line-height:2em;
font-weight:;
position:relative
}
.treeview ul li:before {
content:"";
display:block;
width:10px;
height:;
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:;
}
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("<i class='tree-indicator '>></i>");
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();
})
})
基于jquery的简洁树形折叠菜单的更多相关文章
- 基于jQuery制作的手风琴折叠菜单
初始化为全部隐藏 点第一个,显示第一个所隐藏的内容 当点第二个的时候,第一个的内容隐藏,第二个栏目的内容显示,以此类推 下面是代码部分 <!DOCTYPE html><html la ...
- 一个基于jQuery的简单树形菜单
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...
- 【treeview】 基于jQuery的简单树形插件
[treeview] 效果图: 前几天想把后台的目录结构通过树形插件的方法反映到前端来,在网上搜了半天只找到了这个treeview,虽然不是很好看,不过还是够用的..用treeview的前提是要有jq ...
- 基于jquery网站左侧下拉菜单
网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="container"& ...
- jQuery简单竖排手风琴折叠菜单代码
项目需求1.刚开始只显示,每个标题, 2.让每个 li列表隔行换色 3.当我点击某个标题时,下面的列表会缓慢的展开,其他列表展开的内容会收起 <!DOCTYPE html> <htm ...
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
- 5JS树形结构菜单和jQuery版
第一版JS版HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
- 10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
随机推荐
- Activiti学习之 多实例实现会签功
转: Activiti学习之 多实例实现会签功能 2014年11月26日 11:27:11 程诺 阅读数:26185 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...
- Python正则表达式(regular expression)简介-re模块
Python正则表达式(regular expression)简介-re模块 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 就其本质而言,正则表达式(或RE模块)是一种小型的,高度 ...
- Spark记录-Scala类和对象
本章将介绍如何在Scala编程中使用类和对象.类是对象的蓝图(或叫模板).定义一个类后,可以使用关键字new来创建一个类的对象. 通过对象可以使用定义的类的所有功能. 下面的图通过一个包含成员变量(n ...
- TCP和IP的三次握手和第四次挥手
TCP握手协议 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接.第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确 ...
- HDU 1524 树上无环博弈 暴力SG
一个拓扑结构的图,给定n个棋的位置,每次可以沿边走,不能操作者输. 已经给出了拓扑图了,对于每个棋子找一遍SG最后SG和就行了. /** @Date : 2017-10-13 20:08:45 * @ ...
- day63_SpringMVC学习笔记_01
1.JAVAEE体系结构 JAVAEE体系结构图如下所示: 2.什么是springmvc? 什么是mvc? Model1 Model2 SpringMVC是什么? SpringMVC是一个web层mv ...
- python技巧 使用值来排序一个字典
In [8]: a={'x':11,'y':22,'c':4} In [9]: import operator In [10]: sorted(a.items(),key=operator.itemg ...
- CF359B Permutation (构造)
CF359B Permutation \(solution:\) 作为一道构造题,这题也十分符合构造的一些通性----(找到一些规律,然后无脑循环). 构造一个长度为 \(2n\) 的排列 \(a\) ...
- C# 文件Copy
文件Copy有以下几种方法: 1.Copy string sourceFile = @"c:\temp\New Text Document.txt"; string destina ...
- L0,L1,L2范数,正则化,过拟合
L0范数是指向量中非0元素的个数 L1范数是向量中各个元素的绝对值求和 L2范数是指向量的各个元素平方求和然后取和的平方根 机器学习的目的是使学习到的模型不仅对已知的数据而且对未知的数据有很好的预测能 ...