관심 있 는 사람 이 있 으 면 동적 으로 데 이 터 를 불 러 오 거나 jquery 를 사용 하면 코드 가 많이 줄 어 들 것 입 니 다!나 는 css 를 추가 하 는 것 을 발 견 했 습 니 다.이 나 무 는 정적 페이지 에서 큰 용도 가 있 습 니 다!
function toggleChild(o) { var cls = o.getAttribute("class"); if (cls == "expand") { var sb = o.nextSibling; if (window.innerWidth) sb = sb.nextSibling; while (sb != null && sb.tagName.toLowerCase() == 'dd') { sb.style.display = "none"; sb = sb.nextSibling; if (window.innerWidth) sb = sb.nextSibling; } o.removeAttribute("class"); o.setAttribute("class", "hide"); if(window.innerWidth)//ff o.textContent="전"+o.textContent.substring(1);else o.innerText="전"+o.innerText.substring(1);}else { var sb = o.nextSibling; if (window.innerWidth) sb = sb.nextSibling; while (sb != null && sb.tagName.toLowerCase() == 'dd') { sb.style.display = ""; sb = sb.nextSibling; if (window.innerWidth) sb = sb.nextSibling; } o.removeAttribute("class"); o.setAttribute("class", "expand"); if(window.innerWidth)//ff o.textContent="왈"+o.textContent.substring(1);else o.innerText="왈"+o.innerText.substring(1);}}function maketree(obj) { var dts = obj.getElementsByTagName('dt'); for (var i = 0; i < dts.length; i++) { dts[i].setAttribute("class", "expand"); if(window.innerWidth)//ff dts[i].textContent="왈"+dts[i].textContent;else dts[i].innerText="왈"+dts[i].innerText;dts[i].onclick = function() { toggleChild(this); }; } } window.onload = function() { maketree(document.getElementById("tree")); }; 정의 목록 도 나무 로 변 할 수 있 습 니 다.
dt>메뉴 1- 1.1 aa
- 1.2 bbb
- 1.3 ccc
메뉴 2- 2.1 안녕하세요?
