如果你的系统需要这样一种用于为用户解答各种问题的FAQ系统，那么这个FAQ模板是你最好的选择。这个FAQ插件是响应式的，使用jQuery和css3制作，同时在不支持JAVASCRIPT的浏览器上也能正常工作。
HTML结构
html结构使用一个section .cd-faq作为wrapper。里面分割为两个部分： .cd-faq-categories 和.cd-faq-items。第一个用于导航，第二个用于放置问答列表。每一个.cd-faq-group是一个包含一组问题的无序列表。
<section class="cd-faq">
<ul class="cd-faq-categories">
<li><a href="#basics">Basics</a></li>
<li><a href="#mobile">Mobile</a></li>
<li><!-- ... --></li>
</ul>
<div class="cd-faq-items">
<ul id="basics" class="cd-faq-group">
<li class="cd-faq-title"><h2>Basics</h2></li>
<li>
<a class="cd-faq-trigger" href="#0">How do I change my password?</a>
<div class="cd-faq-content">
<!-- content here -->
</div>
</li>
<li>
<a class="cd-faq-trigger" href="#0">How do I sign up?</a>
<div class="cd-faq-content">
<!-- content here -->
</div>
</li>
<li><!-- ... --></li>
</ul>
<ul id="mobile" class="cd-faq-group">
<!-- ... -->
</ul>
<!-- ... -->
</div>
</section>
CSS样式
这个demo的css样式非常简单，你可以下载文件来自行研究，特别需要指出的一点是，CSS样式中使用.no-js class来支持那些不支持javascript的浏览器实现效果。
使这个类工作的方法是：将.no-js放到<html>元素中。Modernizr 将移除这个class并将它更换为 .js class。你需要知道：如果Modernizr不工作（因为浏览器不支持javascript），你使用的是.no-js来制作你的样式。
JAVASCRIPT
对于屏幕小于768像素的浏览器，当用户点击了某一个问题的类别，我们为每一个faq项添加.slide-in类。
对于大屏幕，选项被选择时屏幕平滑的向下滚动。
当屏幕大于1024像素，我们为窗口的滚动绑定updateCategory() 事件。这个方法检测$(window).scrollTop()的值，如果用户滚动到比.cd-faq高的位置，就为.cd-faq-categories设置position: fixed，这样使它们在屏幕上一直处于可见状态。
