기본 js_javascript 기술로 만든 아코디언 효과 탐색 메뉴-JS 튜토리얼-php.cn

완성된 아코디언 효과는 다음과 같습니다. 자세한 내용은 코드를 참조하세요. html 코드

코드 복사 코드는 다음과 같습니다: 아코디언 #accordion{ width:200px; } #accordion ul{ 목록 스타일: 없음 디스플레이:없음 } .first-level{ 배경 색상: #d8d8d8 배경 색상: rgba(236, 208, 208, 0.53); 테두리 반경: 4px; 커서: 포인터 여백: 2px 0 0

최소 높이: 0 } 🎜> 레벨 1 첫 번째 항목 두 번째 항목 ;h3 class="first -level">레벨 1 첫 번째 항목 세 번째 항목 ;레벨 1 첫 번째 항목 두 번째 항목 세 번째 항목 varheads = document.querySelectorAll(".first-level"); function headClick(event){ var target = EventUtil.getTarget(event) toggleDisplay(target) .parentNode.querySelector(" ul")); } for(var i=0;i EventUtil.addHandler(heads[i], "click", headClick); }

window.onunload = function (){ for(var i=0;i EventUtil.removeHandler(heads[i ], "클릭", headClick) } heads = null }

common.js 파일

코드 복사

코드는 다음과 같습니다.

varggleDisplay = function (element) { var display = getStyle(element, "display") if (display == "none") { element.style.display = "차단"; } else { element.style.display = "없음" } }