javascript FAQ 기능(질문답변)_javascript 스킬

효과는 다음과 같습니다. 질문을 클릭하면 다음 답변 내용이 표시됩니다.

코드 복사 코드는 다음과 같습니다.

스크립트 유형= "text/ javascript">
onload = function(){
faq(document.getElementsByTagName("dl")[0], "dt", "dd")
/*
* faq 함수 : elem은 상위 요소, qTag는 제목 요소, aTag는 콘텐츠 요소
*/
}
function faq(elem, qTag, aTag){
aTag = aTag | | "dd"; // 아래와 동일
elem = elem || document; 🎜>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";
}
}
}
}



테스트 코드:

제목 없는 문서 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title> </title> <style type="text/css"> dd { background: #eee; border: 1px solid #ccc; margin-left: 2px; padding: 4px; } </style> <dl>질문 하나: 무엇을 할 준비가 되었나요?<dt> <b> </b> 내가 하고 싶은 ê±´ 너야, 너에 대한 내 마음을 이해해줄래? 당신도 나와 같기를 바랍니다. </dt> <dd> </dd>두 가지 퀘스트: 무엇을 원하시나요?<dt> <b> </b> 지금 ë³´ê³  싶어, 너무 ë³´ê³  싶어, 지금 이 순간도 ë³´ê³  싶어. </dt> <dd> 세 가지 질문: 여자 친구를 갖고 싶나요? </dd> <dt> 다들 너무 원하는 것 같아요. 나도 그렇고, 누군가가 매일 나에게 말을 걸어줬으면 좋겠어요. </dt> <dd> </dd> </dl>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]