如果你的系统需要这样一种用于为用户解答各种问题的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，这样使它们在屏幕上一直处于可见状态。