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>

测试代码：

Untitled Document

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

dd {
background: #eee;
border: 1px solid #ccc;
margin-left: 2px;
padding: 4px;
}

One question:What are ready to do?
What I want to do is you,do you understand my feeling to you.

I hope you are the same to me.

Two questing:What do you want?
I want to see you now,I miss you so much,I want to see you at this moment.
Three question:Do you want to have a girlfriend?
I think everyone want it so much,me too,I want to have someone talk to me everyday.

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

赞 (0)

相关推荐

  • 完美实现仿QQ空间评论回复特效

    完美实现仿QQ空间评论回复特效

    评论回复是个很常见的东西,但是各大网站实现的方式却不尽相同.大体上有两种方式 1. 像优酷这种最常见,在输入框中@要回复的人,这种方式下,用户可以修改@. 新浪微博则是在这个基础上,弹出好友菜单.这种方式的好处是不需要任何js,css处理兼容. 2. 像qq空间这种,对回复的人整个删除.本屌感觉这种方式比较好,但这种方式有些兼容性上的细节,这个后面会详细说明. 事实上,qq空间的这种实现在效果上是兼容了ie和现代浏览器的,做的非常好.上面是chrome ie8 ie7 ie6就不上图片了,太卡了

  • JS类定义原型方法的两种实现的区别评论很多

    我们知道,给JavaScript类添加原形(prototype)方法是很简单的.而且常用的有下面这两种方法,可是这两种方法在使用时有区别吗?     JScript Class:  复制代码 代码如下: function JSClass()   {        } Extends prototype method:  复制代码 代码如下: JSClass.prototype.MethodA = function()   { }; Or   复制代码 代码如下: function = JSCla

  • pjblog发表评论用的ajaxJS.js

    document.write('<DIV id="loadingg"  style="HEIGHT:65px; WIDTH: 200px;POSITION: absolute; Z-INDEX:1000;border:3px;solid;text-align:center;sans-serif;color:#000000;background-color:#FFFFFF;opacity:.7;-moz-opacity:.7;filter: Alpha(Opacity=7

  • 一个jsp+AJAX评论系统第1/2页

    这是一个简单的评论系统,使用了JDOM(这边使用Jdom-b9),实例使用JSP作为视图,结合使用AJAX(用到prototype-1.4),Servlet和JavaBean作为后台处理,使用xml文件存储数据. 1.应用目录结构如下: data   |--comment.xml js   |--prototype.js   |--ufo.js(UTF-8格式)                                                                    

  • Json实现异步请求提交评论无需跳转其他页面

    主要将代码粘贴,通过阅读代码理解其中的相关逻辑. html代码: <form id="form1" runat="server"> <p> 评论:</p> <p> 姓名:<input type="text" name="username" id="username1" /></p> <p> 内容:<textarea n

  • js写的评论分页(还不错)

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer

  • javascript发表评论或者留言时的展开效果

    biyuan给大家拜年了! body { margin:20px; background:#c72c02; color:#ffffff; font-size:12px; font-family:verdana; } fieldset { width:300; border:1px dashed #ffffff; } legend { width:150px; border:1px dashed #ffffff; background-color:#c72c02; font-weight:bold

  • js实现简单的星级选择器提交效果适用于评论等

    js实现简单的星级选择器提交效果适用于评论等

    星级选择器,提交代码适用于评论等 没有用到js库,就是单独的js代码   复制代码 代码如下: <form action="" method="get"> <div id="star_level" star_width="14"> <p>服务</p> <ul class="star_rating"> <li style="displ

  • 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,

  • JavaScript hasOwnProperty() 函数实例详解

    hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性.如果有,返回true,否则返回false. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. IE 5.5+.FireFox.Chrome.Safari.Opera等主流浏览器均支持该函数. 语法 object.hasOwnProperty( propertyName ) 参数 参数 描述 propertyName Str

  • JavaScript正则表达式函数总结（常用）

    /* 测试环境:Chrome 63.0.3239.132 */ JS中正则对象修饰符可选值为:"i" "g" "m",即忽略大小写 进行全局匹配 多行模式 JS中正则表达式支持的元字符: 1:枚举方括号表达式,范围方括号表达式,枚举取反方括号表达式,范围取反方括号表达式 2:. \w \W \d \D \s \S \b \B \n \r \f \v \888 \uffff \xff 3:n? n+ n* n{a} n{a,} n{a,b}及这些量

  • javascript匿名函数中的'return function()'作用

    我最近看到很多javascript代码,看起来我错了.在这种情况下,我应该建议哪种更好的代码模式?我将重现我所看到的代码和每个代码的简短说明: 代码块#1 该代码不应该评估内部函数.程序员会因为代码应该运行而感到困惑. $(document).ready( function() { return function() { /* NOPs */ } }); 代码块#2 程序员可能打算实现一个自调用功能.他们没有完全完成实现(他们在嵌套括号的末尾缺少一个().另外,由于它们在外部函数中没有做任何事情

  • javascript中函数的写法实例代码详解

    具体代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible

  • javascript的函数作用域

    在一些类似c语言的编程语言中,花括号内的每一段代码都具有各自的作用域,而且变量在声明他们的代码段之外是不可见的,我们称为块级作用域(block scope),而javascript中没有块级作用域.取而代之的javascript使用的是函数作用域(function scope):变量在声明它的函数体以及这个函数体嵌套的任意函数体内都是有定义的. 在如下代码中,在不同位置定义的i,j和k,他们再同一个作用域内都是有定义的 复制代码 代码如下: function text(o)   {      

  • 浅析JavaScript 箭头函数 generator Date JSON

    ES6 标准新增了一种新的函数: Arrow Function(箭头函数). x => x *x 上面的箭头相当于: function (x){ return x*x; } 箭头函数相当于匿名函数,并且简化了函数定义.一种像上面的,只包含一个表达式, 连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x =>{ if(x > 0){ return x * x; }else{ return -x *x; } } 如果参数不是

  • Javascript变量函数浅析

    一.变量 在javascript变量中可以存放两种类型的值:原始值和引用值. 原始值存储在栈上的简单字段,也就是值直接存储在变量所标示的位置内. 引用值存储在堆内的对象,栈内变量保存的是指向堆内对象的指针值. 在javascript中有5种基本类型:Undefined,Null,Boolean,Number,String. 引用类型其实就是对象,类似其他语言中类实例的概念. 复制代码 代码如下: var b = true; // 存储在栈上 var num = 20; //存储在栈上 var b

  • JavaScript 匿名函数（anonymous function）与闭包（closure）

    引入 匿名函数 闭包 变量作用域 函数外部访问函数内部的局部变量 用闭包实现私有成员 引入 闭包是用匿名函数来实现.闭包就是一个受到保护的变量空间,由内嵌函数生成."保护变量"的思想在几乎所有的编程语言中都能看到. 先看下 JavaScript 作用域: JavaScript 具有函数级的作用域.这意味着,不能在函数外部访问定义在函数内部的变量. JavaScript 的作用域又是词法性质的(lexically scoped).这意味着,函数运行在定义它的作用域中,而不是在调用它的作用

  • JavaScript自定义函数实现查找两个字符串最长公共子串的方法

    本文实例讲述了JavaScript自定义函数实现查找两个字符串最长公共子串的方法.分享给大家供大家参考,具体如下: //查找两个字符串的最长公共子串 function findSubStr(s1,s2){ var S=sstr= "" ,L1=s1.length,L2=s2.length; if (L1>L2){ var s3=s1;s1=s2,s2=s3,L1=s2.length;} for ( var j=L1;j> 0 ;j--) for ( var i= 0 ;i&

随机推荐