jQuery和css3简单实用的FAQ问答页面模板

当前位置:主页 > jQuery库 > 布局和界面 > jQuery和css3简单实用的FAQ问答页面模板
jQuery和css3简单实用的FAQ问答页面模板
分享:

    插件介绍

    这是一款简单实用的jQuery和css3 FAQ问答系统单页模板。该FAQ模板左侧的导航菜单会随着页面的滚动而移动到相应的选项上,设计得十分人性化。可用于FAQ系统或网站简介等。

    浏览器兼容性

    浏览器兼容性
    时间:2014-12-13
    阅读:

简要教程

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