완성된 아코디언 효과는 다음과 같습니다. 자세한 내용은 코드를 참조하세요. html 코드 코드 복사 코드는 다음과 같습니다: 아코디언 <br>#accordion{ <br>width:200px; <br>} <br>#accordion ul{ <br> 목록 스타일: 없음 <br>디스플레이:없음 <br>} <br>.first-level{ <br>배경 색상: #d8d8d8 <br>배경 색상: rgba(236, 208, 208, 0.53); <br> 테두리 반경: 4px; <br> 커서: 포인터 <br> 여백: 2px 0 0 <br> <br>최소 높이: 0 <br>} <br></head> <br><div id="accordion"> 🎜><div> <br><h3 class="first-level">레벨 1</h3> <br><ul> <br><li>첫 번째 항목 <br> </li> <li>두 번째 항목</li> <br> </ul> <br><div> <br> ;h3 class="first -level">레벨 1</h3> <br><ul> <br><li>첫 번째 항목</li> <br><li>세 번째 항목</li> <br></div> <br><h3 class="first-level"> ;레벨 1 <br><ul> <br><li>첫 번째 항목</li> <br><li>두 번째 항목<br> </li> <li>세 번째 항목</ul> <br></div><br><script src="common.js"</script> <script> <br>varheads = document.querySelectorAll(".first-level"); <br>function headClick(event){ <br>var target = EventUtil.getTarget(event) <br>toggleDisplay(target) .parentNode.querySelector(" ul")); <br>} <br>for(var i=0;i<heads.length;i ){ <br>EventUtil.addHandler(heads[i], "click", headClick); <br> } <br><br>window.onunload = function (){ <br>for(var i=0;i<heads.length;i ){ <br>EventUtil.removeHandler(heads[i ], "클릭", headClick) <br>} <br>heads = null <br>} <br><br> <br>common.js 파일<br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다.<br><br> <br>var EventUtil = { <br>addHandler : 함수(요소, 유형, 핸들러) { </li> </ul> </div>if (element.addEventListener) { <br> element.addEventListener(type, handler, false) <br>} else if (element.attachEvent) { <div class="codetitle">element.attachEvent("on" type, handler); } else { <span>element[" on" type] = handler; <a style="CURSOR: pointer" data="49681" class="copybut" id="copybut49681" onclick="doCopy('code49681')">} <u>}, </u>removeHandler : 함수(요소, 유형, 핸들러) { </a>if(element.removeEventListener) { </span>element.removeEventListener(type, handler , false); </div>} else if (element.detachEvent) { <div class="codebody" id="code49681">element.detachEvent("on" type, handler) <br>} else { <br>element ["on" 유형] = null; <br>} <br>}, <br>getEvent : 함수(이벤트) { <br>return event || window.event <br>getTarget: 함수 (이벤트) { <br>return event .target || event.srcElement; <br>} <br>} <br><br><br>var getStyle = function (el, style) { <br>if (el .currentStyle) { <br>style = style.replace(/-(w)/g, function (all, letter) { <br>return letter.toUpperCase(); <br>}); el.currentStyle[style]; <br>return value; <br>} else { <br>return document.defaultView.getCompulatedStyle(el, null).getPropertyValue(style) <br>} <br>} <br> <br><br>varggleDisplay = function (element) { <br>var display = getStyle(element, "display") <br>if (display == "none") { <br>element.style.display = "차단"; <br>} else { <br>element.style.display = "없음" <br>} <br>} <br><br><br> </div> </div> </div>
