其实现代码如下所示：
Tree.HTML
<HTML>
<body bgcolor="#FFFFFF">
<script language="JavaScript">
NS4 = (document.layers) ? 1 : 0;//声明变量判断是否是Netscape浏览器
IE4 = (document.all) ? 1 : 0; //声明变量判断是否是IE浏览器
ver4 = (NS4 || IE4) ? 1 : 0;
//再声明一个变量Ver4,当使用的浏览器是IE或者是Netscape时给变量赋值1
if (Ver4) {//通过Ver4的值来判断是否显示不同的样式
with (document) {//下面执行体用默认的document对象
write("<STYLE TYPE='text/CSS'>");
if (NS4) {
//如果是Netscape浏览器则应用下面的类选择器的内嵌样式显示绝对路径和完全可见
write(".parent {position:absolute; visibility:visible}");
write(".child {position:absolute; visibility:visible}");
write(".regular {position:absolute; visibility:visible}")
}
else {//否则只用类选择器.child的样式显示none
write(".child {display:none}")
}
write("</STYLE>");
}
}
function getIndex(el) {
ind = null;
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id == el) {
ind = i;
break;
}
}
return ind;
}
//定义一个函数getIndex，作用是获得变量ind的值
function arrange() {
nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}
//定义一个函数arrange()作用就是定义页面上元素的位置。当菜单打开时，页面上菜单
//以下的东西的位置顺序往下推，菜单合起时，菜单以下的东西自动上移。
function initIt(){
if (!ver4) return;
if (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
}
else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
whichEl = divColl(i);
if (whichEl.className == "child") whichEl.style.display = "none";
}
}
}
//定义函数initIt()，页面载入时，首先调用该函数。作用是初始化菜单，让页面载入时，菜单
//处于未打开状态。
function expandIt(el) {
if (!ver4) return;
if (IE4) {
whichEl = eval(el + "Child");
if (whichEl.style.display == "none") {
whichEl.style.display = "block";
}
else {
whichEl.style.display = "none";
}
}
else {
whichEl = eval("document." + el + "Child");
if (whichEl.visibility == "hide") {
whichEl.visibility = "show";
}
else {
whichEl.visibility = "hide";
}
arrange();
}
}
//定义一个函数expandIt(el)。由于层的可见状态在IE浏览器和Netscape浏览器中的解释是不同
//的，所以要分别讨论，判断菜单的状态。如果菜单是打开的，那么当再单击时，子菜单就不可
//见；如果菜单是关闭状态，那么当再单击时，子菜单就可见。
onload = initIt;//当页面加载时调用初始化的方法
</script></script></font></p><!---这一部分是页面上所显示的部分，包括那些形象的文字。
-->
<div id="KB1Parent" class="parent">
<a href="" onClick="expandIt('KB1'); return false">文件夹一</a>
</div>
<div id="KB1Child" class="child">
<a href="" target="_blank">页面一</a>
<br>
<a href="" target="_blank">页面二</a>
<br>
<a href="" target="_blank">页面三</a>
</div>
<div id="KB2Parent" class="parent">
<a href="" onClick="expandIt('KB2'); return false">文件夹二</a>
</div>
<div id="KB2Child" class="child">
<a href="" target="_blank">页面三</a>
</div>
<div id="KB3Parent" class="parent">
<a href="" onClick="expandIt('KB3'); return false">文件夹三</a>
</div>
<div id="KB3Child" class="child">
<a href="" target="_blank">页面一</a>
<br>
<a href="" target="_blank">页面二</a>
<br>
<a href="" target="_blank">页面三</a>
</div>
<script language="JavaScript">
if (NS4) { //如果用户的浏览器是Netscape，先初始化变量。
firstEl = "KB1Parent";
firstInd = getIndex(firstEl);
arrange();
}
</script></body>
</HTML>
分享到：
相关推荐
JavaScript+Ajax实现树形目录是一种常见的前端技术应用，主要用于构建交互式、动态更新的网页内容。在本场景中，我们主要关注三个核心概念：树形目录、JavaScript和Ajax。 **树形目录** 是一种模拟真实文件系统或者...
JSP与WebLogic结合实现树形目录 #### 知识点详解： - **JSP（Java Server Pages）**：这是一种用于创建动态网页的技术。它允许开发者在HTML页面中嵌入Java代码。当用户请求一个JSP页面时，服务器会将该页面编译成...
在JavaScript中实现树形目录是一种常见的需求，尤其是在前端开发中，例如构建文件管理系统、组织层级结构数据或构建导航菜单。树形目录通过节点（每个节点代表一个目录或文件）和边（表示节点间的父子关系）来模拟...
在VC++（Visual C++）开发环境中，实现树形目录遍历是一项常见的任务，尤其在文件管理系统或资源浏览器等应用中。本知识点将详细讲解如何使用递归算法来完成这一功能，以及涉及到的相关编程概念。 首先，理解目录...
Bootstrap 实现树形目录组件详解 在Web开发中，经常需要处理复杂的层级数据，例如在汽车选择场景中，用户可能需要从多个级别的车型目录中进行选择。为了满足此类需求，可以利用Bootstrap框架来构建一个可扩展、交互...
数据结构课程设计中，树形目录结构是一种关键的非线性数据结构，它...总的来说，这个课程设计项目旨在通过实现树形目录结构，让学生掌握树数据结构的理解与应用，以及链表操作、文件输入输出、面向对象编程等相关技能。
在QML（Qt Quick）中实现树形组件可以是一项挑战，因为默认的`TreeView`控件可能不完全符合开发者的期望。本篇文章将深入探讨如何根据个人需求自定义一个更灵活、功能更丰富的树形组件。 QML是Qt框架的一部分，它...
用JAVa实现 树形目录的显示，有界面
在Visual Studio 2005 (VS2005) 中实现树形目录是一个常见的需求，尤其是在开发Windows应用程序时，为了展示文件系统结构或者数据库层次结构。本文将深入探讨如何在VB.NET环境下利用控件和API函数来创建一个动态、...
- 为了提高页面性能，可以使用AJAX技术实现树形目录的异步加载，即只在需要时加载子节点。 - 当用户点击节点时，发送AJAX请求到服务器，服务器返回对应的子节点数据，客户端JavaScript更新DOM。 6. **权限控制与...
在这个主题中，我们将深入探讨JavaScript实现树形目录的关键概念、技术以及实际应用。 首先，理解树形结构的基础是节点（Node）。每个节点都有一个值，并可能包含子节点（子目录）和父节点（上级目录）。在...
本篇文章详细介绍了如何利用Vue.js的递归组件来实现树形目录结构，这种结构在展示具有层级关系的数据时非常常见。 ### 树形目录的实现原理 实现树形目录的基本思路是将每个节点看作是一个组件，如果这个节点拥有子...
在这个文件中，开发者可能定义了树形目录的构造函数、节点操作方法（如添加、删除、展开、折叠节点）、事件处理等，以实现树形目录的功能。 4. **img**: 这是一个目录，通常用于存放与树形目录相关的图片资源，比如...
在这个示例中，我们将深入探讨Ajax在实现树形目录管理中的关键技术和应用场景。 首先，Ajax的核心在于XMLHttpRequest对象，它允许JavaScript在后台与服务器进行通信。在树形目录管理中，当用户点击目录节点时，...
本篇文章将深入探讨如何使用jQuery实现树形目录，特别是基于jQuery UI库中的`treeview`插件。 ### 1. jQuery简介 jQuery是一个轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。它的API设计...
在Android中，为了实现树形目录，我们可以使用递归的思想。首先，创建一个`Directory`类，包含文件名、路径、子目录列表等属性。然后，通过递归遍历文件系统的目录，构建一个`Directory`对象的树形结构。遍历过程中...
接下来，我们讨论如何在C++中使用MFC实现树形目录。MFC提供了一个叫做CTreeCtrl的类，它封装了Windows的HTREEITEM控件，用于创建和管理树形控件。以下是一些关键步骤： 1. **创建CTreeCtrl对象**：在C++类的成员...
### 树形目录的递归实现数据库 #### 数据库结构设计与实现原理 根据所提供的信息，我们可以了解到，这里讨论的是如何使用 Java 和 JSP 实现一个树形目录系统，并将其存储在数据库中。该系统主要涉及到数据库的设计...
以下是实现树形目录的基本步骤： 1. **初始化树形控件**：在对话框或视图的初始化函数中，你需要创建并设置`CTreeCtrl`对象。这通常包括设置控件ID、样式，并将其添加到父窗口。 ```cpp // 在OnInitDialog()或类似...