인터넷에서 많은 트리 구현을 찾고, 나는 항상 그것이 만족스럽지 않다고 생각합니다. 플러그인을 사용하려면 JS 외부 파일을 참조해야하거나 너무 많은 코드로 인해 사람들이 현기증이납니다. 사실, 나는 간결한 코드와 무형 로직이있는 트리를 구현하고 싶습니다. 많이 말하고 싶지 않고 코드로 가고 싶지 않습니다.
1. 먼저 CSS 스타일을 작성하고 작성 해야하는 헤더가 먼저 렌더링됩니다.
코드 사본은 다음과 같습니다.
<스타일>
.ps {margin-left : 10px; display : none;}
.f {
배경 : URL ( "add.gif") No -Repeat 스크롤 -4px -21px;
커서 : 포인터;
높이 : 35px;
라인 높이 : 37px;
왼쪽 패딩 : 20px;
}
</스타일>
2. 페이지의 특정 내용을 페이지의 본체에 추가하십시오. 이 컨텐츠는 동적으로 표시 될 수 있습니다 (동적 디스플레이는 규칙을 기반으로하는 한 쉽게 구현할 수 있으므로 말할 필요가 없습니다. Smile).
코드 사본은 다음과 같습니다.
<div id = "sgc1"> 비밀번호 수정 </div>
<div id = "sgc2"> 제품 선택 </div>
<div id = "sgc3"onclick = "w ( 'gc3')"> 분류 설정 </div>
<div id = "gc3"style = "display : none">
<div id = "sfgc91"onclick = "k ( 'fgc91')"> </div>
<div id = "fgc91">
<div> Mustsee 제품을 설정 </div>
</div>
<div id = "sfgc93"onclick = "k ( 'fgc93')"> 스포트라이트 </div>
<div id = "fgc93">
<div> 스포트라이트 제품을 설정 </div>
</div>
<div id = "sfgc94"onclick = "k ( 'fgc94')"> 일일 스페셜 </div>
<div id = "fgc94">
<div> Set Dailyspecials 제품 </div>
</div>
<div id = "sfgc95"onclick = "k ( 'fgc95')"> hotcategory </div>
<div id = "fgc95">
<div> HotCategory 분류 설정 </div>
<div> 핫 카테고리 제품을 설정 </div>
</div>
<div id = "sfgc96"onclick = "k ( 'fgc96')"> hot & cool picks </div>
<div id = "fgc96">
<div> Hot & Cool Picks 제품 </div>
</div>
<div id = "sfgc97"onclick = "k ( 'fgc97')"> featuredcategorie </div>
<div id = "fgc97">
<div> Set FeaturedCategories </div>
<div> Set FeaturedCategories </div>
</div>
<div id = "sfgc98"onclick = "k ( 'fgc98')"> 당신도 좋아할 수도 있습니다… </div>
<div id = "fgc98">
<div> 당신이 좋아할 수도 있습니다… 카테고리 </div>
<div> 당신이 좋아할 수도 있습니다… 제품 </div>
</div>
</div>
<div id = "sgc4"onclick = "w ( 'gc4')"> 시스템 설정 </div>
<div id = "gc4"style = "display : none">
<div> 사용자 관리 </div>
</div>
3. 하이라이트가 여기에 있습니다. 같은 신발에주의를 기울인 다음 JS의 트리 제어를 구현하십시오.
코드 사본은 다음과 같습니다.
함수 W (vd) {
var ob = document.getElementById (vd);
if (ob.style.display == "block"|| ob.style.display == "") {
ob.style.display = "none";
var ob2 = document.getElementById ( 's' + vd);
ob2.style.background = "url (add.gif) -4px -21px no -Repeat";
}
또 다른 {
ob.style.display = "블록";
var ob2 = document.getElementById ( 's' + vd);
ob2.style.background = "url (add.gif) -4px 4px no -Repeat;";
}
}
함수 K (vd) {
var ob = document.getElementById (vd);
if (ob.style.display == "block") {
ob.style.display = "none";
var ob2 = document.getElementById ( 's' + vd);
ob2.style.background = "url (add.gif) -4px -21px no -Repeat";
}
또 다른 {
ob.style.display = "블록";
var ob2 = document.getElementById ( 's' + vd);
ob2.style.background = "url (add.gif) -4px 4px no -Repeat;";
}
}
4. 실행중인 예제 다이어그램은 다음과 같습니다.