第一步：下载JQUERY和TREEVIEW插件。
JQUERY:http://jquery.bassistance.de/dist/jquery.js
TREEVIEW:http://jquery.bassistance.de/treeview/jquery.treeview.zip(注意：解压后里面的DEMO是不能正常显示的，因为缺少jquery.js。大家下载下来放到相应目录即可)
第二步：创建一个HTML文件
因为我们要利用一些图片资源，所以就在jquery.treeview.zip解压以后的目录里面创建。
例如我们创建一个treeview.html文件。用你喜欢的编辑器写以下的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TREEVIEW</title>
这里是引入jquery.js文件，我上面已经提过原来的压缩包是没有的，下载以后复制进去即可。
<script type="text/javascript" src="jquery.js"></script>
这里是引入treeview插件
<script type="text/javascript" src="jquery.treeview.js"></script>
下面这个是jquery的语法格式，不懂的可以到上面看我给的那些入门资料。
<script type="text/javascript">
$(function(){
$("ul").Treeview();
});
</script>
以下是一些CSS样式，这里是必须的。大家可以根据自己的喜好来改它的外观，这也是我特别欣赏 的地方
<style type="text/css">
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}
.treeview li {
margin: 0;
padding: 4px 0 3px 20px;
}
.treeview li { background: url(images/tv-item.gif) 0 0 no-repeat; }
.treeview .collapsable { background-image: url(images/tv-collapsable.gif); }
.treeview .expandable { background-image: url(images/tv-expandable.gif); }
.treeview .last { background-image: url(images/tv-item-last.gif); }
.treeview .lastCollapsable { background-image: url(images/tv-collapsable-last.gif); }
.treeview .lastExpandable { background-image: url(images/tv-expandable-last.gif); }
</style>
</head>
<body>
大家可以根据自己的要求改下面的这些代码，只要结构按照html语言里的列表结构即可。
<ul>
<li>Item 1
<ul>
<li>Item 1.1</li>
</ul>
</li>
<li class="closed">Item 2 (如果CLASS指定了closed,那么他默认是关闭的)
<ul>
<li>Item 2.1
<ul>
<li>Item 2.1.1</li>
<li>Item 2.1.2</li>
</ul>
</li>
<li>Item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</body>
</html>
分享到：
相关推荐
**jQuery 实现无限极树表格菜单详解** 在网页开发中，树形结构的展示经常用于组织和层次化数据，如目录、组织架构或层级关系的数据。jQuery 是一个广泛使用的 JavaScript 库，它提供了丰富的功能来简化网页交互。...
本项目"jQuery递归无限极树状菜单"就是这样一个解决方案，它利用jQuery的灵活性和CSS的样式控制，实现了可扩展的无限级树形菜单。 首先，我们需要理解jQuery的核心概念。jQuery是一个JavaScript库，它简化了HTML...
在本文中，将详细介绍如何使用JavaScript（JS）以及jQuery框架实现无限级联动下拉选项。这种效果通常用于具有层级结构的数据选择，比如在进行网站产品分类选择、地区选择等场景。无限级联动下拉选项能够根据上一级...
### TreeView 控件实现无限极分类 在 Web 开发中，`TreeView` 控件是非常实用的一个工具，尤其在展示层级关系的数据结构时更是如此。本文档将深入探讨如何使用 `TreeView` 控件来实现无限极分类，并通过具体的代码...
这个“jQuery实现递归无限极树状菜单特效源码.zip”压缩包提供了一种利用jQuery创建无限级树状菜单的方法。下面我们将详细探讨如何使用jQuery实现这种效果以及相关技术点。 首先，树状菜单是一种常见的UI元素，常...
jQuery，作为一款强大的JavaScript库，为开发者提供了丰富的API和工具，使得实现这种无限级下拉菜单变得相对简单。本文将深入探讨如何使用jQuery插件来创建无限级下拉菜单。 首先，我们需要理解无限级下拉菜单的...
本文将深入探讨`TreeView`无限极分类导航，以及它与C#、ASP.NET、SQLDBA等相关技术的结合应用。 首先，`TreeView`控件是Windows Forms和ASP.NET中的一个控件，用于显示数据的树形结构，通常用于展示文件系统、网站...
jQuery中，我们可以使用`.show()`和`.hide()`方法来实现这个功能。假设我们希望点击某个元素时显示或隐藏菜单，可以这样写： ```javascript $(document).ready(function() { $("#toggleMenu").click(function() { ...
**jQuery无限极复选框下拉树**是一种交互式的用户界面元素，常用于在Web应用中展示层次结构的数据，如组织结构、目录树或者复杂的分类系统。这种组件允许用户通过展开和折叠节点来查看和选择多级选项。下面将详细...
本示例中的“Treeview和dropdownlist无限极分类添加删除”是一个实用的功能，它允许用户在界面上无限制地添加、编辑和删除分类，同时在`TreeView`中以树状结构显示，以及在`DropDownList`中以选择列表的形式呈现。...
在构建无限极侧边下拉菜单时，jQuery的主要作用在于动态地展示和隐藏子菜单，通过监听用户的鼠标悬停事件，实现下拉菜单的展开与收起。 无限极下拉菜单的核心在于递归结构，它可以处理任意深度的菜单层级。在CSS中...
无限极存储过程分类treeview源码。public void bind() { TreeView1.Nodes.Clear(); TreeNode rootNode = new TreeNode(); XiaoH.Bll.Company.Select bll=new XiaoH.Bll.Company.Select(); DataTable dt = bll....
标题中的“jQuery基于BootStrap样式实现无限极地区联动”是指使用jQuery库和Bootstrap框架来创建一个具有无限级联动效果的地区选择功能。这个功能在许多网站中常见，特别是那些需要用户输入详细地址信息的场景，如...
利用递归实现无限极目录展示，可点击展开和收起，基于jquery
在这个特定的案例中，我们关注的是如何利用C#来实现一个结合数据库的无限极目录树。无限极目录树意味着节点可以有任意数量的子节点，形成了一个无限深度的树形结构。 首先，让我们深入理解`TreeView`控件的基本用法...
总结来说，jQuery无限极多级导航下拉菜单是网页开发中一个实用的工具，它通过灵活的HTML结构、CSS样式和jQuery事件处理，实现了无限级别的导航菜单，提高了用户体验，同时也为开发者提供了高度的可定制性。
本文将深入探讨如何使用jQuery实现递归的无限级树状菜单，并介绍相关的技术点。 首先，理解"无限级"的概念。无限级树状菜单意味着菜单的层级数量没有限制，可以任意添加子节点，而不仅仅是局限于三到四级。这要求...