javascript FAQ函数(提问+回复)

  效果如下图:当点击问题时显示下面的回复内容。

javascript FAQ函数(提问+回复)

  

复制代码 代码如下:

  script type="text/javascript">

  onload = function(){

  faq(document.getElementsByTagName("dl")[0], "dt", "dd");

  /*

  * faq函数:elem是父元素,qTag是标题元素,aTag是内容元素

  */

  }

  function faq(elem, qTag, aTag){

  aTag = aTag || "dd"; //提供默认值,下同

  qTag = qTag || "dt";

  elem = elem || document;

  var dds = elem.getElementsByTagName(aTag);

  for (var i = 0, len = dds.length; i < len; i++) {

  dds[i].style.display = "none";

  }

  var dts = elem.getElementsByTagName(qTag);

  for (var i = 0, len = dts.length; i < len; i++) {

  dts[i].style.cursor = "hand";

  dts[i].onclick = function(){

  var next = this.nextSibling;

  //获得当前元素的下一个元素的引用

  while (next.nodeType != 1) {

  next = next.nextSibling;

  }

  if (next.style.display != "none") {

  next.style.display = "none";

  }

  else {

  next.style.display = "block";

  }

  }

  }

  }

  </script>

  测试代码:

  

   [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]