The effect is as follows: When you click on the question, display the following reply content.
Copy Code code as follows:
Script type= "Text/javascript" >
onload = function () {
FAQ (document.getElementsByTagName ("DL") [0], "DT", "DD");
/*
* FAQ Function: Elem is the parent element, Qtag is the header element, Atag is the content element
*/
}
function FAQ (Elem, Qtag, Atag) {
Atag = Atag | | "DD"; Provide default values, below
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;
Gets a reference to the next element of the current element
while (Next.nodetype!= 1) {
Next = next.nextsibling;
}
if (Next.style.display!= "None") {
Next.style.display = "None";
}
else {
Next.style.display = "block";
}
}
}
}
</script>
Test code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <ptml> <pead> & Lt;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 function: Elem is the parent element, Qtag is the header element, Atag is the content element/} function FAQ (Elem, Qtag, Atag) {Atag = Atag | | "DD"; Provide default values, hereinafter 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; Gets a reference to the next element of the current element 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> </pead> <body> <dl> <dt> <b>one question:what are ready to do?</b& Gt </dt> <dd> What I want to be you,do you understand me feeling to. I hope you are the same to me. </dd> <dt> <b>two questing:what do your want?</b> </dt> <dd> I want to , I miss you much,i want. </dd> <dt> Three question:do you want to have a girlfriend? </dt> <dd> I am want it so much,me Too,i want to have someone to me talk. </dd> </dl> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
