<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js最简单的树菜单</title>
<style type="text/css">
ul{ list-style:none; display:none;}
</style>
<script type="text/javascript">
window.onload = initAll;
function initAll(){
//获取所有连接标签，并在点击时触发函数
var allLinks = document.getElementsByTagName("a");
for(var i=0;i<allLinks.length;i++){
allLinks[i].onclick = toggleMenu;
}
}
function toggleMenu(){
//获取类名相同的id，并设置其可见和不可见
var thisMenuName = this.className;
var thisMenu = document.getElementById(thisMenuName).style;
thisMenu.display=(thisMenu.display == "block") ? "none" : "block";
}
</script>
</head>
<body>
<h1>树菜单</h1>
<div> <a href="#" class="menu0">标题1</a>
<ul id="menu0">
<li><a href="#">内容1</a></li>
<li><a href="#">内容1</a></li>
<li><a href="#">内容1</a></li>
<li><a href="#">内容1</a></li>
</ul>
</div>
<div> <a href="#" class="menu1">标题2</a>
<ul id="menu1">
<li><a href="#">内容2</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容2</a></li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
简单树菜单是最基础的形式，由一系列可展开/折叠的节点组成，每个节点可以有零个或多个子节点。用户可以通过点击节点来展开或折叠其子节点，以此探索和操作层次结构。这种菜单在文件管理器、网站导航、软件设置等...
"史上最完美最简单js树形菜单"这个标题表明我们即将探讨一个高效的JavaScript实现，它能轻松创建和管理树形菜单，并且在Java Struts框架下有良好的兼容性。下面将详细阐述相关知识点。 首先，JavaScript是Web前端...
本文将详细讲解如何创建一个“最简单树形下拉菜单”，以及实现这个功能所需的关键技术。 首先，我们需要理解树形下拉菜单的基本构成。这种菜单通常由一个父节点（主菜单项）和多个子节点（次级菜单项）组成。当用户...
在本文中，我们将深入探讨如何使用JavaScript（JS）和jQuery_z_tree库来创建一个简单的树形菜单。这个菜单是基于SimpleTree1.3的JS思想，它极大地简化了前端开发人员的工作，使得创建动态、交互式的树状结构变得更加...
以上就是使用JavaScript制作简单树形菜单的基本过程。当然，实际应用中可能需要考虑更多的细节，如样式、动画效果、无障碍访问等。通过扩展这个基础示例，你可以创建出满足项目需求的复杂树形菜单系统。
本教程将详细讲解如何利用CSS、HTML以及少量JavaScript实现一个超简单的树形菜单。 首先，我们需要理解树形菜单的基本结构。在HTML中，我们通常使用`<ul>`和`<li>`元素来构建层次结构。树形菜单的每一级节点都是一...
树形菜单在IT界是一种常见的用户界面元素，尤其在数据层级结构复杂的应用中，如文件管理系统、组织架构展示、导航菜单等。它以图形化的方式展现了数据间的层次关系，使得用户能够直观地理解和操作这些数据。本文将...
在C#编程环境中，创建和使用树形菜单是构建用户界面时常见的任务，尤其是在开发桌面应用程序时。树形菜单提供了一种层次结构的视图，允许用户以递归方式查看和操作数据。以下是一个关于如何在C#窗体中实现树形菜单的...
在网页设计中，树形菜单是一种常见的用户界面元素，它以层级结构展示信息，使得用户可以方便地浏览和导航复杂的目录或数据结构。jQuery作为一款轻量级、高性能的JavaScript库，提供了丰富的功能来实现这样的交互效果...
描述中提到的“已封装，简单易用”，意味着这个JS树形菜单库已经过优化，开发者可以快速集成到自己的项目中，而无需深入了解复杂的实现细节。这通常涉及到提供清晰的API接口、简单的初始化步骤以及详尽的文档支持。 ...
简单树形菜单通常指的是设计简洁、易于理解和操作的这种菜单系统。 1. **树形结构基础** 树形结构是一种非线性的数据结构，由节点（或称为顶点）和边组成。每个节点可以有零个或多个子节点，除了根节点（没有父...
在树形导航菜单的实现中，jQuery提供了强大的DOM操作、事件处理和动画效果，使得动态创建和控制树形结构变得简单。 要使用jQuery创建树形导航菜单，我们首先需要一个HTML结构，这个结构通常包括`<ul>`和`<li>`元素...
Jquery树形菜单则是jQuery应用的一个经典示例，它主要用于构建可交互的、层次分明的导航结构，常见于网站的侧边栏、文件管理系统等场景。在描述中提到的"优秀的Jquery树形菜单"可能是指一个高效、可定制且用户体验...
在IT领域，尤其是在Web开发中，构建动态的菜单树是一种常见的需求。这通常涉及到数据结构的理解，特别是树数据结构，以及服务器端与客户端交互的技术，如JSP（JavaServer Pages）。在这里，我们将深入探讨如何利用...
"JS 树菜单集合（最全）"是针对这一需求提供的资源包，包含多种类型的树菜单实现，适用于不同的场景和设计要求。 树菜单在JS中通常通过DOM操作和事件监听来构建，它们的核心原理是递归地生成和管理节点。"jstree....
- **基本树形菜单**：展示如何创建最简单的树形菜单。 - **异步加载**：当节点数据量大时，可以通过异步方式按需加载，提高页面性能。 - **可编辑节点**：允许用户编辑节点的文本。 - **搜索功能**：添加搜索插件，...
### 使用ExtJs构建树形菜单功能详解 #### 一、引言 在现代Web应用程序开发中，树形菜单是一项常用且重要的功能。它能够帮助用户更直观地理解数据层次关系，尤其是在展示组织架构、文件系统或者任何有层级结构的...
Java的Swing库提供了丰富的功能，使得在各种应用程序中实现树形菜单变得简单且灵活。不过，这只是一个基础的实现，实际应用中可能还需要处理更复杂的逻辑，例如加载异步数据、支持拖放操作等。在实践中，不断学习和...
想修改又无从下手，所以有单独写一个简单的树形菜单的想法，趁下班的时间，抽空写了一个简单的JS文件，基于jQuery1.6版本的 SimpleTree。 SimpleTree使用起来比较方便，它实现了最基本的树形菜单的功能，包括1个...