如何基于jQuery实现制作“FAQ问与答”下拉效果?

好多网友在问JS点击下拉显示效果。本文介绍下基于jquery的实现过程,其可以应用于导航菜单、问与答等

HTML结构: 

  1. <dl id="js_faq"> 
  2.     <dt>jquery如何制作纵向类似手风琴效果?</dt> 
  3.     <dd>请看实现代码,其实横线效果也类似</dd> 
  4.     <dt>jquery如何制作纵向类似手风琴效果?</dt> 
  5.     <dd>请看实现代码,其实横线效果也类似</dd> 
  6.     <dt>jquery如何制作纵向类似手风琴效果?</dt> 
  7.     <dd>请看实现代码,其实横线效果也类似</dd> 
  8.     <dt>jquery如何制作纵向类似手风琴效果?</dt> 
  9.     <dd>请看实现代码,其实横线效果也类似</dd> 
  10. </dl> 

dl中的dt属于标题,dd属于dt的内容,用dl来制作类似这样从属关系的结构,最合适不过啦!而且代码语义化,符合SEO优化!

 

JS效果:

  1. $(function(){ 
  2.     //FAQ 
  3.     $("#js_faq").find("dt").click(function(){ 
  4.         $("#js_faq").find("dt").removeClass("curr"); 
  5.         $("#js_faq").find("dd").hide(); 
  6.         $(this).addClass("curr"); 
  7.         $(this).next("dd").show(); 
  8.     }) 
  9. }) 

说明:点击dt显示其紧邻的dd标签(参考jquery的next()方法),隐藏其它的dd,其中css样式curr是给当前被点击对象加样式的,可以根据自己的需要定义样式。

 

next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素,并用匹配元素构造新的 jQuery 对象。

除了show()与hide()方法,我们也可以用slideDown()与slideUp()方法去实现相关效果。

 

相关经验

导读书签
书签初始化中…