jQuery-创建可扩展树
我们可以使用jQuery创建图形化的树状结构，其中可以折叠和展开树中的节点。本教程将显示一个简单的示例，说明如何使用jQuery实现这种树结构。
为了创建可以折叠和展开的树，我们将使用ulHTML元素。 ul元素是无序列表。这样的列表可以递归地包含嵌套列表，因此该元素已经能够显示树结构。
ul树结构
这是一个ul元素示例，该示例将ul显示为一棵树：
<ul id="tree">
<li>1
<ul>
<li>1.1
<ul>
<li>1.1.1</li>
<li>1.1.2</li>
</ul>
</li>
<li>1.2
<ul>
<li>1.2.1</li>
<li>1.2.2</li>
</ul>
</li>
</ul>
</li>
</ul>
如我们所见，根ul元素具有嵌套的li元素，而后者又嵌套了ul元素。这就是树的形成方式。
树CSS样式
ul列表自然在每个列表项(li元素)旁边显示项目符号。为了删除要点并调整缩进，我们需要在页面上添加一些CSS样式。如果我们不熟悉CSS，那么我有一个免费的，全面的CSS教程。
这是树CSS类的定义方式：
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding-left: 0.5em;
}
</style>
我们还需要定义生成的树使用的三个自定义CSS类。他们来了：
<style>
.handle {
background: transparent url(/images/spacer.png);
background-repeat: no-repeat;
background-position: center bottom;
display: block;
float: left;
width: 10px;
height: 11px;
}
.collapsed {
background: transparent url(/images/plus-black.png);
background-repeat: no-repeat;
background-position: center bottom;
cursor: pointer;
}
.expanded {
background: transparent url(/images/minus-black.png);
background-repeat: no-repeat;
background-position: center bottom;
cursor: pointer;
}
</style>
handleCSS类是用于所有展开/折叠手柄的基本样式。处理程序将.collapsed和.expanded类用于树中的折叠节点和展开节点。一旦我们看到生成树的代码，便会看到它们的用法。
树jQuery代码
最后，这是将ul元素变成可扩展树的jQuery代码：
<script>
$(document).ready(function() {
jQuery("#tree ul").hide();
jQuery("#tree li").each(function() {
var handleSpan = jQuery("<span></span>");
handleSpan.addClass("handle");
handleSpan.prependTo(this);
if(jQuery(this).has("ul").size() > 0) {
handleSpan.addClass("collapsed");
handleSpan.click(function() {
var clicked = jQuery(this);
clicked.toggleClass("collapsed expanded");
clicked.siblings("ul").toggle();
});
}
});
}
</script>
首先，代码选择ID为" tree"的元素内的所有嵌套ul元素并将其隐藏。这样做是为了使树中的嵌套节点开始折叠。仅树的顶部节点可见。
其次，代码选择id为" tree"的元素中的所有li元素并对其进行迭代。
对于每个li元素，都会在其内部插入一个span元素。此span元素是展开/折叠手柄。默认情况下，其上设置了handle类。如果li元素也有一个ul元素作为子元素，则将折叠的类添加到插入的span元素中，并添加一个click侦听器。
has()函数返回具有与给定选择器字符串匹配的元素的选定元素的子集。如果li元素内部有一个ul元素，则has(" ul")将返回一个包含li元素本身的集合。如果li元素内部没有ul元素，则返回的集合将为空，并且size()将返回0。因此，请检查if(jQuery(this).has(" ul")。size() > 0)，如果li元素具有嵌套的ul元素，则返回true，否则返回false。
添加到句柄范围的点击侦听器函数可切换CSS类"折叠"和"展开"，并切换以下ul元素的可见性。由于插入的span元素以CSS类" collapsed"开头，因此在同一条语句中切换" collapsed"和" expanded"将有效地在这两个类之间切换。已找到的类将被删除(例如"折叠")，而未找到的类将被添加(例如"扩展")。
稍短的版本
通过利用jQuery中的函数调用链接，可以使上面的代码短一些。大多数不返回新对象的函数调用，都会返回调用该函数的对象。因此，上面的代码可以这样写：
<script>
$(document).ready(function() {
jQuery("#tree ul").hide();
jQuery("#tree li").each(function() {
var handleSpan = jQuery("<span></span>")
.addClass("handle").prependTo(this);
if(jQuery(this).has("ul").size() > 0) {
handleSpan.addClass("collapsed").click(function() {
jQuery(this).toggleClass("collapsed expanded")
.siblings("ul").toggle();
});
}
});
}
</script>
此外，在实际的代码编辑器中，上面链接的两个函数调用行中的两个可能已经写在一行中。
替代实施
还有其他方法可以实现可扩展树。这是另一种方式：
<script>
$(document).ready(function() {
jQuery("#tree ul").hide();
jQuery("#tree li").prepend("<span class='handle'></span>");
jQuery("#tree li:has(ul)")
.children(":first-child").addClass("collapsed")
.click(function(){
jQuery(this).toggleClass("collapsed expanded")
.siblings("ul").toggle();
});
}
</script>
首先，此实现首先将具有id树的元素中的所有ul元素隐藏起来。
其次，代码选择具有id树的元素中的所有li元素，并将空的span元素插入(添加)到每个选定的li元素中。请注意，如何在span HTML代码中设置类" handle"，而不是使用jQuerys CSS函数。有时，将属性和类直接插入HTML会更容易。要使用jQuery执行相同操作，我将不得不编写以下代码：
jQuery("#tree li").prepend("<span></span>")
.children(":first-child").addClass("handle");
最后，代码选择其中具有ul元素的li元素(具有id树的元素内部)，选择这些li元素的第一个子元素(handle span元素)，向其中添加" collapsed"类，然后添加点击侦听器函数。
如我们所见，有很多方法可以使用jQuery实现相同的函数。哪种实现方式更可取，取决于个人喜好。
