星期三, 六月 27, 2012

这些天纠结的收放自如

类似常见问题(FAQ)的网页,通常都会首先显示所有问题列表,然后在用户点击某个问题时自动展开显示详细答案。收放自如的版式,既可以让读者在同一页面中查看大量信息,又不至于因为内容过多而使页面布局凌乱。

方案 1Toggle Visibility

可以使用以下代码,显示或隐藏指定区域。此方案的优势是,代码和结构都非常简单。而不足是,当区域显示后需要再次点击链接以重新隐藏内容。请查看在线实例

方案 2Simple Javascript Accordions

Dezinerfolio使用Javascript开发的Simple Javascript Accordions,提供了横向、纵向和标签页等多种形式的收放效果。此方案的优势是,利用插件减少开发成本。而不足是,需要在页面加载时启动此插件,可能与其它插件产生冲突。请查看在线实例

Simple Javascript Accordions

方案 3CSS3 Accordion Effect

CSS Ninja使用CSS3开发的Accordion Effect,提供了纯CSS并且支持多种浏览器(包括IE6+)的收放效果。此方案的优势是,CSS便于调试,并且不会与其它插件产生冲突。而不足是,收放效果在IE和非IE浏览器中稍有不同:在非IE中浏览器中,需要点击链接以展开内容;而在IE中,鼠标移动到标题行就会自动扩展显示。请查看在线实例

CSS3 Accordion Effect

注意:以上方案均需要为每段问答指定ID,代码维护成本较高。