对于任何一个Web应用，与用户互动是最基本的要求。为Web应用增加交互性，最常用的方法，莫过于使用 Javascript 或 jQuery、AJAX 了。
本节不打算详细介绍这几种技术，只是简要介绍在网页版 word 中，如何使用这些技术来实现目录展开折叠功能、文档结构视图功能、键盘翻页功能。这些功能看似不起眼，却非常实用，可以大大提高网页版 word 的易用性，增强用户体验。
目录展开折叠
如果目录树较长，经常需要滚动，才能找到想要的内容，使用起来极其不便。一个很人性化的功能，就是可以全部展开和全部收起整个目录。
幸运的是，dtree 提供了两个方法，一个是 openAll() 方法，用于展开所有的节点，一个是 closeAll() 方法，用于收起所有的节点。
我们只需定义两个链接，当点击链接时，分别调用调用 openAll() 和 closeAll() 方法，便可轻松实现目录全部展开和全部收起功能。
可以使用文本链接，也可以使用图像 map。这里使用图像 map 实现，在图像上指定区域提供链接，供用户点击。需要注意的是，map 元素中 name 属性的值，必须与左栏顶部图像中 map 属性的值相对应。HTML代码如下：
<map name="oAll"><area shape="rect" coords="0,0,22,24" href="javascript: tree.openAll();"><area shape="rect" coords="22,0,44,24" href="javascript: tree.closeAll();"></map>
可以为 map 中的 area 元素提供 title 属性，如，title = "全部展开"。这样用户鼠标悬停到map的链接区域后，可以提醒用户，点击这里可以全部展开、或全部收起整个目录。
现在，用户点击左栏顶部图像的左半部分，就可以展开整个目录，点击右半部分，就可以收起整个目录。全部展开的运行结果如图 11‑19 所示：
图11-19 全部展开
如果本教程对您帮助很大，请随意打
