类似常见问题(FAQ)的网页,通常都会首先显示所有问题列表,然后在用户点击某个问题时自动展开显示详细答案。收放自如的版式,既可以让读者在同一页面中查看大量信息,又不至于因为内容过多而使页面布局凌乱。
方案 1Toggle Visibility
可以使用以下代码,显示或隐藏指定区域。此方案的优势是,代码和结构都非常简单。而不足是,当区域显示后需要再次点击链接以重新隐藏内容。请查看在线实例。
方案 2Simple Javascript Accordions
Dezinerfolio使用Javascript开发的Simple Javascript Accordions,提供了横向、纵向和标签页等多种形式的收放效果。此方案的优势是,利用插件减少开发成本。而不足是,需要在页面加载时启动此插件,可能与其它插件产生冲突。请查看在线实例。
方案 3CSS3 Accordion Effect
CSS Ninja使用CSS3开发的Accordion Effect,提供了纯CSS并且支持多种浏览器(包括IE6+)的收放效果。此方案的优势是,CSS便于调试,并且不会与其它插件产生冲突。而不足是,收放效果在IE和非IE浏览器中稍有不同:在非IE中浏览器中,需要点击链接以展开内容;而在IE中,鼠标移动到标题行就会自动扩展显示。请查看在线实例。
注意:以上方案均需要为每段问答指定ID,代码维护成本较高。