<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Reorder TreePanel</title>
<head>
<script type="text/javascript">
<!--
function initNodes(){
var uls = document.getElementsByTagName("ul");
var i;
for(i = 0; i < uls.length; i++)
if(uls[i].id != "root")
uls[i].style.display = "none";
}
function clickNode(id){
var node = document.getElementById(id);
if(node.style.display == "none")
node.style.display = "block";
else
node.style.display = "none";
return false;
}
-->
</script>
</head>
</head>
<body onload="initNodes()">
Example of a tree menu
<ul id="root">
<li><a href="" onclick="return clickNode('r1n1')">Root 1</a>
<ul id="r1n1">
<li>Node 1
</li>
<li>Node 2
</li>
<li>Node 3
</li>
</ul>
</li>
<li><a href="" onclick="return clickNode('r2n1')">Root 2</a>
<ul id="r2n1">
<li><a href="" onclick="return clickNode('r2n1n1')">Node 1</a>
<ul id="r2n1n1">
<li>Node 1
</li>
<li>Node 2
</li>
<li>Node 3
</li>
<li><a href="#">Node 4</a>
</li>
<li>Node 5
</li>
<li>Node 6
</li>
<li>Node 7
</li>
<li>Node 8
</li>
<li>Node 9
</li>
</ul>
</li>
<li>Node 2
</li>
<li>Node 3
</li>
<li><a href="" onclick="return clickNode('r2n4n1')">Node 4</a>
<ul id="r2n4n1">
<li>Node 1
</li>
<li>Node 2
</li>
<li><a href="" onclick="return clickNode('r2n4n1n3')">Node 3</a>
<ul id="r2n4n1n3">
<li>Node 1
</li>
<li>Node 2
</li>
<li>Node 3
</li>
<li>Node 4
</li>
</ul>
</li>
</ul>
</li>
<li>Node 5
</li>
</ul>
</li>
</ul>
using style sheet and javascript.
</body>
</html>
分享到：
相关推荐
在本示例中，“二级树形菜单示例：CSS+TreeMenu”利用了CSS（层叠样式表）来实现这样的效果，这是一种无JavaScript或JavaScript辅助的解决方案，完全依赖于CSS的力量。 CSS在创建动态和交互式网页元素方面扮演着...
### CNL Tree Menu 无限级CSS树形菜单 #### 一、概述 “CNL Tree Menu 无限级CSS树形菜单”是一款由CNLei开发的高质量、纯CSS实现的树形菜单系统，该系统兼容多种浏览器，包括但不限于IE5.0+、Firefox 1.0+以及...
要实现TreeMenu效果，可以通过JavaScript和HTML来完成。本例中，TreeMenu的核心在于能够通过点击某个节点来展开或折叠其子节点。通过JavaScript中的控制函数control()，我们可以实现当点击包含减号的span元素时，...
在这个实例中，我们关注的是如何利用jQuery创建一个动态的目录树（menu tree），这是一种常见的用户界面元素，用于展示层级结构的数据，如网站导航、文件系统或数据库结构。目录树通常以缩进的形式呈现，用户可以...
然后，我们调用这个函数，传入根节点和父`<ul>`元素（在这个例子中是`#treeMenu`）。 最后，为了让菜单具有交互性，我们可以添加一些JavaScript来控制展开和关闭子菜单。例如，当用户点击一个包含子菜单的菜单项时...
本文将详细讲解如何创建一个“最简单树形下拉菜单”，以及实现这个功能所需的关键技术。 首先，我们需要理解树形下拉菜单的基本构成。这种菜单通常由一个父节点（主菜单项）和多个子节点（次级菜单项）组成。当用户...
- jstree 是一个功能丰富的jQuery Tree控件，支持XML、JSON和HTML数据源。 - 提供创建、重命名、移动和删除节点的功能，以及拖放操作。 - 可自定义规则和事件监听，且是收费的。 3. **jQuery File Tree** - 这...
JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，尤其是在客户端脚本处理上。树形菜单是JS在前端开发中常见的一种交互元素，它通常用于展示层级关系清晰的数据，如网站导航、文件...
var treeMenu = document.getElementById('treeMenu'); // 假设有一个id为'treeMenu'的容器元素 for (var i = 0; i ; i++) { var menuItem = menuItems[i]; var itemLink = document.createElement('a'); item...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果以及异步通信等任务。而 jQuery 的右键菜单插件则为用户提供了一种方便的方式来实现自定义的右键点击上下文菜单。在这...
<ul id="treeMenu"> 菜单1 子菜单1-1 子菜单1-2 菜单2 子菜单2-1 子菜单2-2 ``` 接着，我们可以使用JavaScript（通常结合CSS）来实现菜单的展开与折叠。以下是一个简单的实现方式： 1. **添加...
“index.html”是网页的入口文件，通常包含HTML结构和Layui的JS引用。在“index.html”中，开发者会定义页面的基本结构，包括header、nav、main和footer等部分。Layui的菜单组件可以通过JavaScript动态加载，实现...
【Dojo树实例详解】 Dojo是一个强大的JavaScript库，它为Web开发...在`tree&menu.html`文件中，通常会包含以下关键部分： 1. **引入Dojo库**：确保在HTML头部引入了Dojo的CDN链接或者本地的Dojo库文件。 ```html ...
通常，这个文件会定义一个名为TreeMenu的Vue组件，该组件接受一个数据列表作为props，列表中的每个对象代表菜单的一个节点，包含ID、文本、子节点数组等属性。例如： ```javascript { id: 1, text: '菜单项1', ...
这些可以通过进一步扩展我们的代码，引入库如jQuery UI或更专业的Tree库（如jstree）来实现。 总之，通过JavaScript，我们可以轻松地创建树形菜单，提供用户友好的导航体验。通过理解基本的HTML结构和JavaScript...
1. **基础样式实例**: 展示了最简单的Treeview实现，通常用于快速搭建基础的导航菜单。在这个实例中，你可以看到如何将普通的无序列表转换为具有折叠/展开功能的树状结构。 2. **扩展样式实例**: 添加了更多视觉效果...
在Vue.js框架中，Element UI库是一个非常受欢迎的前端组件库，它提供了丰富的UI元素，如按钮、表单、表格等。在这个名为"element动态创建多级菜单"的项目中，开发者利用Element UI来构建了一个可动态生成多级菜单的...
"easyUi js+css" 提供了 easyui 的 JavaScript 和 CSS 文件，方便开发者直接在项目中引用，无需自行构建。 1. **EasyUI 框架概述** EasyUI 是一套轻量级的前端开发工具，它简化了网页布局和交互设计，通过预定义的...
2. **组件丰富**：EasyUI 提供了诸如表格（datagrid）、树（tree）、菜单（menu）、对话框（dialog）、面板（panel）等常见的 UI 组件，这些组件都有丰富的配置选项和交互功能。 3. **皮肤多样化**：EasyUI 的一大...
<ul id="treeMenu"> 菜单1 子菜单1 子菜单2 菜单2 ``` 接下来，我们需要编写JavaScript代码来处理树形菜单的行为。在jQuery中，我们可以为每个顶层`<li>`元素添加点击事件，当点击时，查找其内的子`<ul>...