<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" onclick="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" onclick="aa(this)">
title
</div>
<div class="cd_main" style="display:none;">
<ul>
<li>
<div class="cd">
<div class="cd_title" onclick="aa(this)">
title
</div>
<div class="cd_main" style="display:none;">
<ul>
<li>
<div class="cd">
<div class="cd_title" onclick="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" onclick="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" onclick="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>
分享到：
相关推荐
JavaScript树形菜单是一种在网页中实现层次结构数据展示的交互方式，它通常用于导航、文件管理、选项配置等场景。"带复选框"的JS树形菜单则更进一步，允许用户通过勾选复选框来选择或操作树节点，为用户提供了一种...
JavaScript中的树结构是一种数据结构，它模拟了自然界中的树形关系，用于组织和操作数据。在Web开发中，树组件通常被用作用户界面（UI）元素，以展示层次化的数据，例如文件系统、组织结构或者导航菜单。下面将详细...
为了增加更多的交互功能，比如添加点击事件、折叠/展开图标等，我们可以使用更复杂的方法，如使用类库（如jQuery或Vue.js）或者原生JavaScript。还可以通过CSS添加样式，如使用`::before`和`::after`伪元素来创建...
jsTree 是一个强大的 JavaScript 库，专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写，无需依赖其他库，因此对于初学者和有经验的开发者来说，都是一个易于理解和使用的工具。通过这个库，你...
在描述中提到的"JS做的树形结构很漂亮"，这通常指的是通过JS实现的具有视觉吸引力的树形图。开发者可能使用CSS来美化节点样式，包括颜色、字体、边框等，以及使用SVG或图片来表示节点的展开/折叠状态。此外，动画...
在每一帧中，JavaScript代码会计算当前树的状态，比如树干增长了多少长度，新增了哪些树枝，树叶增加了多少。然后，这些变化会被绘制到Canvas上，形成连续的动画效果。 优化方面，可以考虑以下几点： 1. **性能优化...
本文将深入探讨如何使用JavaScript处理和过滤树形数据结构，并结合提供的`jsTest.html`文件来理解实际应用。 首先，树数据结构是由节点组成的，每个节点可能有零个或多个子节点。在JavaScript中，树数据通常表现为...
总结起来，这个"JS做的简单目录树"项目展示了如何利用JavaScript和CSS构建一个交互式的、具有虚线样式的目录树。通过这个项目，开发者可以学习到如何将静态HTML结构转化为动态的用户界面，以及如何通过JavaScript来...
JavaScript（JS）作为一种广泛使用的客户端脚本语言，提供了多种库和插件来实现交互式的目录树视图。本文将详细介绍几种常见的JS目录树插件及其特点。 1. **jQuery Tree** jQuery Tree是一款基于jQuery的目录树...
构建JavaScript树** - **递归构造**：使用递归函数创建树结构，遍历所有节点及其子节点。 - **数组转换**：将扁平化的数据数组转换为树形结构，通常需要知道每个节点的父节点ID来构建层级关系。 **4. 数据加载策略...
JS Tree 是一个基于JavaScript的库，专门用于在Web页面上创建交互式的目录树结构，这种结构类似于Windows操作系统中的文件夹树，能够帮助用户以层级方式浏览和操作数据。 目录树在Web应用中有很多用途，例如： 1. ...
"js动态目录树"就是这样一个解决方案，它模仿了Windows操作系统中的文件系统目录树视图，提供了一种直观、易用的用户界面。这个项目的目标是为Web应用带来与Windows系统类似的导航体验。 JavaScript（简称js）是...
总结来说，利用JavaScript和Three.js，开发者能够创建出互动性强、视觉效果丰富的3D圣诞树。通过学习和实践，不仅可以提升JavaScript编程技能，还能进一步掌握3D图形学原理，为Web开发打开新的可能。
在标签中，“JS树形菜单”、“JavaScript树形菜单”和“树形菜单”都是对这个技术的关键词描述，强调其基于JavaScript的实现。JavaScript作为客户端脚本语言，使得树形菜单能够在用户的浏览器端动态生成和操作，无需...
【纯JS资源树】是一种基于JavaScript技术实现的交互式数据展示工具，主要用于构建层次结构清晰、操作便捷的树形界面。这种树结构常用于网站导航、文件目录展示、组织架构图等多种场景，允许用户进行添加、删除、修改...
JavaScript 横向树，又称为水平树或组织结构图，是一种常见的数据可视化方式，尤其在展示企业或团队的层级关系时非常有用。这种布局方式将树状结构自上而下展开，使得节点间的层次关系一目了然，且占用空间更少，...
【标题】"圣诞树源码-3D圣诞树javascript源码下载"所涉及的知识点主要集中在Web前端开发领域，特别是JavaScript以及Three.js库的应用。这是一个使用JavaScript编程语言和Three.js库创建的3D圣诞树展示项目。Three.js...
JavaScript 实现在树形菜单中添加、删除节点实例 js note JavaScript实现在树形菜单中添加、删除节点实例，本程序侧重于学习，主要介绍一种在多级树节点中创建节点、删除节点，帮助了解树形菜单创作原理。
在构建"带复选框的JS树"时，开发者通常会利用JavaScript来实现树的展开/折叠、复选框状态的同步以及与其他组件的交互等功能。 为了实现这个功能，开发者通常会使用现有的JavaScript库，如jQuery、Angular、React等...