14-讨论

13.3.3　讨论

上述函数从寻找类为 accordion 的所有定义列表元素开始，并对它们应用jQuery的 .each() 方法。在每个元素中，给第一个 <dl> 链接指定 accordion_expanded 类，显示第一个 <dd>* （由于CSS的 display: none 属性，其他 <dd> 元素仍然隐藏）。此外，把最后一个 <dt> 设置 class="last" ，可以在支持的浏览器中为其设置独特的圆角样式。这与文件树的示例不同，在文件树中为缺乏： lastchild 的浏览器打了补丁。对折叠控件来说，将删除 class="last" 并根据用户交互重新应用。

代码的第二部分处理折叠控件的核心。折叠控件的 <dt> 中存在的所有链接都指定了单击事件监听器。当单击任何链接时，向上遍历DOM到双亲 <dt> 元素，然后经过下一个 <dd> 。如果这个 <dd> 元素是隐藏的，通过jQuery的 .slideDown() 方法用动画显示它，同时在其他兄弟 <dd> 元素上调用 .slideUp() 。完成这一动作之后，执行回调函数 findLast ，该函数根据与最后一个可见的 <dt> 相伴的 <dd> 是否隐藏，确定是否赋予 class="last" 属性。

如果最后一个 <dd> 可见，不进行任何操作，因为这个 <dd> 元素本身已经通过针对 :lastchild 的CSS设置了圆角。同样，聪明的读者会感到奇怪：“为什么我们不为不能识别 :lastchild 的Internet Explorer 6和7打补丁？”原因是，Internet Explorer 6和7不支持 :lastchild ，它们也不支持通过CSS设置圆角，所以在这里补丁得不到什么好处。

最后，在单击的 <dt> 链接上添加 accordion_expanded 类，并在所有其他 <dt> 链接上删除该类。这导致除了最近单击的 <dt> 链接之外，每个 <dt> 上的箭头都指向右方，表示它们折叠起来。