10-讨论

13.2.3　讨论

文件树代码从在类名为 expand_all 和 collapse_all 的链接附加事件处理程序开始。如果单击某一个链接，则向上遍历 DOM 到双亲节点 <p> , 通过下一个 <ul> , 然后向下进入其子节点。每个具有 class="tree_trigger" 属性的子链接接受 trigger_expanded 类，后续的 <ul> 接受 tree_expanded 类。这些类名与改变其外观的CSS规则对应。对于触发链接，它们拥有一个扩展的图标。而对于列表，它们现在用 display: block 代替 display: none 。

“实时”事件监听器监听树中的单击。本质上，监听的是 <ul class="tree"> 中的单击，然后确定单击是否发生在具有 class="trigger" 属性的链接上。如果是，执行相关的代码。使用 .live() 的好处和直接为每个链接添加单击处理程序相反：代码与所有匹配条件的现有和将来的元素相关。这是双重的好处：你不用浪费时间为许多元素附加事件监听器，而且如果动态内容通过Ajax插入，它们也会受到“实时”事件监听器的影响。

接下来，通过JavaScript为每个双亲的 :lastchild 添加一个样式钩子 class="last" 。这样就能通过一条浅灰色的线段，定位模拟树的链接性的背景图像。最后，如果在页面加载时，任何子元素 <ul> 已经用 class="tree_expanded" 硬编码为可见，遍历DOM，为最近的触发链接添加 class="tree_trigger_expanded" 类。