javascript FAQ函数(提问+回复)
时间：2024-04-19 09:55:54
效果如下图：当点击问题时显示下面的回复内容。
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>
测试代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <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> <style type="text/css"> dd { background: #eee; border: 1px solid #ccc; margin-left: 2px; padding: 4px; } </style> </head> <body> <dl> <dt> <b>One question:What are ready to do?</b> </dt> <dd> What I want to do is you,do you understand my feeling to you. I hope you are the same to me. </dd> <dt> <b>Two questing:What do you want?</b> </dt> <dd> I want to see you now,I miss you so much,I want to see you at this moment. </dd> <dt> Three question:Do you want to have a girlfriend? </dt> <dd> I think everyone want it so much,me too,I want to have someone talk to me everyday. </dd> </dl> </body> </html>
标签：javascript,FAQ
0
投稿猜你喜欢
React+TypeScript+webpack4多入口配置详解
2024-02-24 03:23:31
Python Numpy之linspace用法说明
2021-10-17 10:49:55
三大措施设置数据库安全 保障网站安全运营
2008-11-28 14:41:00
分发服务器 系统抛出18483错误，未能连接服务器，因为'distributor_admin'未定义远程登陆
2024-01-24 00:39:48
Linux下彻底卸载mysql详解
2024-01-13 11:31:50
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2022-07-08 08:39:06
python冒泡排序简单实现方法
2022-09-27 12:28:57
JSP实现浏览器关闭cookies情况下的会话管理
2024-03-27 07:29:10
JS验证逗号隔开可以是中文字母数字
2024-04-19 10:48:08
python实现读取excel写入mysql的小工具详解
2024-01-17 21:50:33
浅谈Python中的bs4基础
2022-11-05 16:57:47
Python WEB应用部署的实现方法
2022-02-18 07:34:35
pandas 获取季度,月度,年度首尾日期的方法
2022-08-16 06:53:06
python正则-re的用法详解
2022-05-19 07:50:15
pytorch--之halfTensor的使用详解
2021-08-18 14:44:08
改善登陆界面的用户体验: 自动聚焦表单
2009-12-09 16:13:00
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2023-07-04 06:54:46
JavaScript简单获取页面图片原始尺寸的方法
2024-02-23 14:23:33
Pycharm使用爬虫时遇到etree红线问题及解决
2021-09-04 19:07:06
Python Web编程之WSGI协议简介
2022-08-30 10:39:03