使用DOM折叠网页上的元素
经常来看 catch the digital flow 的朋友一定发现了, 原先侧边栏上长长的blogroll列表不见了, 取而代之的是一个可以点击折叠/展开的动态列表. 整个侧边栏都因此一下子变得简洁不少.
如果你也想把网页上某些元素折叠起来, 那就继续往下读吧! 
此次借助的是一个叫domCollapse的工具包, 它的特点是可以非常简单地实现网页上任意元素的折叠, 而不需要了解JavaScript, 只要在HTML中添加class selector配合CSS就可以实现. (class selector是什么? 参考CSS扫盲(二): syntax)
安装domCollapse:
在head标签之间加入以下代码调用JS脚本和CSS样式表, 当然, 这两个文件要能被页面访问到, 地址需要修改一下.
<script type="text/javascript" src="domcollapse.js"></script>
<style type="text/css">
/* domCollapse styles */
@import "domcollapse.css";
</style>
<style type="text/css">
/* domCollapse styles */
@import "domcollapse.css";
</style>
domCollapse使用方法:
在你想要实现点击折叠/展开功能的元素上加入
class="trigger"
怎么样, 够简单吧? 快去刷新你的页面看看效果吧! 
继续阅读请点击展开 
PS1. domCollapse默认使用循环来检测页面上的所有元素, 所以处理大文档时效率肯定会降低不少, 为了减少循环所消耗的时间, 可以使用以下的方法:
- 如果只想给某种元素(例如: h2)加入折叠/展开的功能, 在HTML文档的h2处加入"trigger"并修改domcollapse.js文件中的
triggerElements:'*'
为
triggerElements:'h2' -
如果只想折叠h2中id为"content"的元素, 需要修改为
triggerElements:'h2',
parentElementId:'content',
PS2. 如果需要实现展开某个元素时其他元素同时折叠, 可以设置
uniqueCollapse:true
PS3. 相应的外观在domcollapse.css文件中修改就可以啦.
hoho, 看到我的演示效果了吧?! 心动了就赶快装一个在你的blog上吧!
fisio 2007年06月21日 12:07 ₪
呵呵，这个厉害了
早就对你这里的 css tab 这类的很感兴趣了 :em25:
yichi 2007年06月21日 13:11 ₪
:em01: 这个真实用，我先拿去用了，呵。可能theme需要先改动一下了