JQuery+div+css实现无限级联树

文件JQTree.CSS:

代码

.Tree{ min-width:200px; min-height:200px; border:silod 1px #ccc; text-align:left; border:dashed 1px #ccc;}
.branch{ background:url(../Image/JqueryTreeBranch_01.png) no-repeat; padding-left:30px; display:none; min-height:25px;}
.branchon{ background:url(../Image/JqueryTreeBranch_02.png) no-repeat; padding-left:30px; display:none; min-height:25px; border-left:dashed 1px #ccc;}
.leaf{ background:url(../Image/JqueryTreeLeaf.png) no-repeat; padding-left:30px; display:none; min-height:25px;}

文件JQTree.JS:

代码

$(function JQeryTree() {
$(function LoadCss() {
var Tree = $("#jquerytree");
Tree = Tree.children();
Tree.addClass("Tree");
Tree = Tree.children();
while (Tree.is("div")) {
Tree.addClass("leaf");
Tree.children().parent().removeClass("leaf");
Tree.children().parent().addClass("branch");
Tree = Tree.children();
}
var FirstBranchs = $(".Tree").children();
FirstBranchs.css("display", "block");
FirstBranchs.css("border", "0");
});
$(function LoadEvent() {
$(".branch").click(function() {
$(this).children().slideToggle();
$(this).toggleClass("branch");
$(this).toggleClass("branchon");
return false;//阻止冒泡
});
$(".leaf").click(function() {
return false;//阻止冒泡
});
});
});

HTML引用时将JQuery库和JQTree.js、JQTree.css引进来，在需要实现树型导航的地方直接写

<div>一级菜单

<div>二级菜单

</div>

</div></div>

依然是一层套一层，与多级菜单不同的时多级菜单的每一个级都需要一个列表容器来放置菜单项，而树型导航则不需要，父级是子级的容器。另外，无论是树型导航还是菜单导航，位置都是由用户自己去定义的，如树：

#jquerytree{ position:relative; top:100px; left:100px; width:250px;}

转载于:https://www.cnblogs.com/li20020439/archive/2010/03/09/1681737.html

JQuery+div+css实现无限级联树相关推荐

html菜单树实现原理,HTML_DIV+CSS构成树型菜单，这是用DIV+CSS+JS构成的树型菜单 - phpStudy...
DIV+CSS构成树型菜单这是用DIV+CSS+JS构成的树型菜单,采用列表,符合WEB标准,在大多数WIN浏览器下,兼容性不错, xhtml见效果页,我现在做的是二个菜单,如果需要添加,可把 .. ...
php mysql js弹出登陆小窗口_基于Jquery+div+css实现弹出登录窗口(代码超简单)_jquery...
具体代码详情如下所示: 基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html jquery点 ...
jquery 遍历无限极树_jQuery parent（）和children（）树遍历函数示例
jquery 遍历无限极树 jQuery provides a lot of tree traversal functions that we can use to get the parent, c ...
表格树形结构 HTML CSS,基于jQuery ztree实现表格风格的树状结构
zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(M ...
城市智慧路灯综合管理平台、图监控、灯箱实时监控、策略管理、故障报警、灯具管理、数据统计、故障分析、开关灯记录分析、区域管理、分组管理、DIV+CSS布局设计、HTML/Bootstrp/jQuery
源码类别: 后台模板文件大小: 21.5 MB 源码内容:城市智慧路灯综合管理平台后台模板前端技术: HTML/CSS/Bootstrap/jQuery 模板语言: 简体中文 ...
毕业设计游戏类网站设计静态页面基于html，div+css+jquery（含源码）
首页.游戏简介.游戏资料.单机攻略.手游攻略.网络攻略.登录|注册等相关功能页面适合商业项目或大学生毕业设计程序,整套静态页面html,div+css+jquery相关技术更多相关内容,请点击下载 ...
div+css+jquery仿写HTML京东首页的练习及一些关于oo css的总结
整个工程: https://download.csdn.net/download/weixin_43388844/10864383 前言前几天看b站上极客学院的web前端开发第二部分时了解到OO C ...
前端html纯静态网页汽车保养服务类资讯网站可用于商业开发及毕业设计素材含源码（div+css+jquery）
基于html+div+css+jquery开发,可用于毕业设计,商业开发,属于纯静态html网页, 源码下载地址:>>>请点击!
下拉的DIV+CSS+JS二级树型菜单，刷新无影响
二级菜单,不论展开几个栏目,刷新不影响! Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
DIV+CSS+JS二级树型菜单，刷新无影响
二级菜单,不论展开几个栏目,刷新不影响! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

JQuery+div+css实现无限级联树

JQuery+div+css实现无限级联树相关推荐

最新文章

热门文章