javascript FAQ函數(shù)(提問+回復(fù))
更新時間:2009年07月21日 23:38:01 作者:
javascript FAQ函數(shù),當(dāng)點擊問題時顯示下面的回復(fù)內(nèi)容。
效果如下圖:當(dāng)點擊問題時顯示下面的回復(fù)內(nèi)容。

script type="text/javascript">
onload = function(){
faq(document.getElementsByTagName("dl")[0], "dt", "dd");
/*
* faq函數(shù):elem是父元素,qTag是標(biāo)題元素,aTag是內(nèi)容元素
*/
}
function faq(elem, qTag, aTag){
aTag = aTag || "dd"; //提供默認(rèn)值,下同
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;
//獲得當(dāng)前元素的下一個元素的引用
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需再刷新一下頁面才能執(zhí)行]

復(fù)制代碼 代碼如下:
script type="text/javascript">
onload = function(){
faq(document.getElementsByTagName("dl")[0], "dt", "dd");
/*
* faq函數(shù):elem是父元素,qTag是標(biāo)題元素,aTag是內(nèi)容元素
*/
}
function faq(elem, qTag, aTag){
aTag = aTag || "dd"; //提供默認(rèn)值,下同
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;
//獲得當(dāng)前元素的下一個元素的引用
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需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
用js實現(xiàn)before和after偽類的樣式修改的示例代碼
本篇文章主要介紹了用js實現(xiàn)before和after偽類的樣式修改的示例代碼,具有一定的參考價值,有興趣的可以了解一下2017-09-09JavaScript實現(xiàn)微信小程序打卡時鐘項目實例
這篇文章主要為大家介紹了JavaScript實現(xiàn)微信小程序打卡時鐘項目實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04