Home > Web Front-end > JS Tutorial > javascript FAQ function (question reply)_javascript skills

javascript FAQ function (question reply)_javascript skills

WBOY
Release: 2016-05-16 18:49:44
Original
1146 people have browsed it

The effect is as follows: when clicking on the question, the following reply content is displayed.
javascript FAQ function (question reply)_javascript skills

Copy code The code is 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 title element, aTag is the content element
*/
}
function faq(elem, qTag, aTag){
aTag = aTag || "dd"; / / Provide default value, the same 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;
//Get 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";
}
}
}
}


Test code:

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute
]
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template