js做的树

最新推荐文章于 2023-11-27 09:00:00 发布
最新推荐文章于 2023-11-27 09:00:00 发布
阅读量107 收藏
点赞数
分类专栏： js 文章标签： JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuexiaowen02/article/details/83361244
版权
<html>
<head>
<title>javascript-1</title>
<style>
*{padding:0px;margin:0px;}
.cd{
width:200px;
}
.cd_title{
cursor:hand;
width:100%;
}
.cd_main{
margin-left:30px;
width:100%;
filter:blendTrans(Duration=0.5);
}
ul,li{
list-style:square inside;
}
.cd_main li{
padding-left:10px;
}
</style>
<script>
function aa(obj){
obj.parentElement.childNodes[1].filters.blendTrans.apply();
obj.parentElement.childNodes[1].style.display=(obj.parentElement.childNodes[1].style.display=="none"?"block":"none");
obj.parentElement.childNodes[1].filters.blendTrans.play();
}

</script>
</head>
<body>

<div class="cd" style="background:red;">
<div class="cd_title" οnclick="aa(this)" style="background:blue;">
title1
</div>
<div class="cd_main" style="display:none; background:green;">
sdfsdf
</div>
</div>
<div class="cd">
<div class="cd_title" οnclick="aa(this)">
title
</div>
<div class="cd_main" style="display:none;">
<ul>
<li>
<div class="cd">
<div class="cd_title" οnclick="aa(this)">
title
</div>
<div class="cd_main" style="display:none;">
<ul>
<li>
<div class="cd">
<div class="cd_title" οnclick="aa(this)">
title
</div>
<div class="cd_main" style="display:none;">
<ul>
<li>
<input type="checkbox" name="idBox">
123</li>
<li><input type="checkbox" name="idBox">123</li>
<li>
<div class="cd">
<div class="cd_title" οnclick="aa(this)">
title
</div>
<div class="cd_main" style="display:none;">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div>
</li>
<li>123</li>
</ul>
</div>
</div>
</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div>
</li>
<li>
<div class="cd">
<div class="cd_title" οnclick="aa(this)">
title
</div>
<div class="cd_main" style="display:none;">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div>
</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div>
</body>
</html>
yuexiaowen02
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS树学习
05-27
Dtree相关 博文链接：https://cdfive20.iteye.com/blog/605319
使用jsTree实现js树形结构
06-07
jsTree 是一个强大的 JavaScript 库，专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写，无需依赖其他库，因此对于初学者和有经验的开发者来说，都是一个易于理解和使用的工具。通过这个库，你...
JS中的树
qq_41177361的博客
12-19 361
这里的树类比现实生活中的树，有树干，树枝，在程序中树是一种数据结构，对于存储需要快速查找的数据很有用，它是一种分层数据的抽象模型。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点以及零个或多个子节点。如下所以为一个树结构：） 和树相关的概念：1.子树：由节点和他的后代构成，如上图标示处。2.深度：节点的深度取决于它祖节点的数量，比如节点5有2个祖节点，他的深度为2。3.高度：树...
树的js
安静的夜空
05-12 78
在网上看到比较成熟的关于树的js都是dtree，google了一下，相关资料先放在着，下次用的时候再具体看
JS数据结构-树
weixin_46224014的博客
11-08 794
1.什么是树？ 树是一种分层数据的抽象模型 前端常见的树包括:DOM树，级联选择，树形控件 2.二叉树常用操作 先序遍历 中序遍历 后序遍历 深度优先遍历 广度优先遍历 3.代码示例 定义一个二叉树文件 const bt = { val: 1, left: { val: 2, left: { val: 4, left: null, right: null }
JS Tree 树型
easyboot的专栏
06-08 535
在网上搜索关于Tree的控件，突然发现这个比较不错，文档和功能比较全面。https://github.com/zTree/zTree_v3
原生JS树树形插件xntree.js
08-05
《原生JS树形插件xntree.js详解》 在现代前端开发中，树形结构的数据展示和操作是常见的需求，例如文件目录、组织架构等。原生JS树形插件xntree.js应运而生，它是一款轻量级、高性能的组件，专门用于构建树形结构，...
BehaviorTree.js：行为树JavaScript实现
02-03
行为树JavaScript实现。 它们对于实现AI很有用。 如果您需要有关行为树的更多信息，请查看 ， 不错的。 产品特点 需要的：序列，选择器，任务 扩展：装饰器 安装 如果使用npm： npm install behaviortree 或使用...
javascript 闪烁的圣诞树实现代码
12-10
根据给定的信息，以下是对“javascript 闪烁的圣诞树实现代码”相关知识点的详细说明。 ### JavaScript 中实现动态效果的基本原理 JavaScript 是一种在浏览器端运行的脚本语言，它能够操作 HTML 和 CSS 来实现动态...
js绘树
qq_32067151的博客
04-13 214
第一步新建HTML文档：&lt;html&gt;   &lt;head&gt;   &lt;style  type="text/css"&gt;   /*设置body样式*/      body{     overflow:hidden;     background: black; }   &lt;/style&gt;   &lt;/head&gt;   &lt;!--设置屏幕背景黑色--&
一个用JS写的很好用的树
04-06
js写的树，默认展开两级，选中变色，能获取到树节点的ID和名称
JSTree(js写的树形菜单，支持加载10000节点以上)
12-23
js树形菜单组件，主要解决大数据加载节点卡死问题。
JS树的遍历实例
05-24
js 实现树形数据结构遍历[前序,后续]；实现树形节点移动，任然保持树形结构；
js数据结构学习---树
qq_44998582的博客
11-28 396
9.树结构 9.1树的特点 树是n(n>=0)个节点构成的有限集合。它具有以下特点： 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为多个不相交的子树 具有以下性质： 树中结点数等于所有结点的度数之和加1 高度为h的m次树最多有m^h-1/m-1个结点 度为m的树中第i层上最多有m^(i-1)个结点(i>=1) 9.2树的术语 节点的度：节点的
【数据结构与算法】JavaScript实现树结构
最新发布
一个前端开发者
11-27 1323
什么是树？树一般都有一个根，连接着根的是树干；树干会发生分叉，形成许多树枝，树枝会继续分化成更小的树枝；树枝的最后是叶子；现实生活中很多结构都是树的抽象，模拟的树结构相当于旋转180°的树。树结构对比于数组/链表/哈希表有哪些优势呢：优点：可以通过下标值访问，效率高；缺点：查找数据时需要先对数据进行排序，生成有序数组，才能提高查找效率；并且在插入和删除元素时，需要大量的位移操作；优点：数据的插入和删除操作效率都很高；查找效率低，需要从头开始依次查找，直到找到目标数据为止；
JS简单实现树结构
weixin_45868552的博客
09-22 5475
本文借鉴于此 一、树的基本概念 1、树： 树是由n(n>0)个有限节点组成的一个具有层次关系的集合，它具有以下的特点： 每个节点有0个或多个结点 没有父节点的节点叫做根节点 每个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为多个不相交的子树 2、节点的度： 节点拥有的子树个数，例如图中节点A的度为2，节点H的度为1 3、树的度： 树的最大节点的度，例如图中最大的节点B的度为3，树的度为3 4、叶节点： 度为0的节点，图中K，J，F，L，O，P都是叶节点 5、父节点： 一个含有子节点
数据结构(六)树JS实现
qq_33811654的博客
07-21 460
数据结构(六)树JS实现 树的特点 1.相关术语 节点的度(Degree)：节点的子树个数个数 树的度：树中所有节点里最大的度 叶节点(Leaf)：度数为0的节点 父节点(Parent)：有子树的节点，相对其子节点 子节点(Child)：有父节点的节点，相对其父节点 兄弟节点(Sibling)：具有相同父节点的子节点 路径和路径长度：树从根节点到最远叶节点之间拥有的边数 节点的层次(Level)：根节点在1层，其他热议节点的层数是其父节点的层数加一 树的深度(Depth)：树中所有节点里最大层数就是这棵树
JS递归遍历树结构
热门推荐
S1ow
08-15 5万+
<script> var arrs = []; function haha(){ var data = [ { name: '中国, children: [ { name: '教',
常用的web前端框架 --- 树
任何技能都是从模仿开始，逐步升华。
01-24 5160
1 dTree  http://www.destroydrop.com/javascripts/tree/ dTree是一个易于使用的JavaScript树形菜单控件。支持无限分级，可以在同一个页面中放置多个dTree，可以为每个节点指定不同的图标。 2 zTree  http://www.ztree.me/  zTree 是一个依靠 jQuery 实现的多功能 “树插件”。
JavaScript树形菜单脚本实现
"该资源提供了一段用于创建js树形菜单的脚本代码，由作者meizz编写，属于JavaScript框架的一部分。此代码适用于构建交互式的树状结构，可能适用于网页界面中的导航或数据组织。代码在2005年2月27日创建，并在2006年8...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值