본문
1 html
2 css
.tree button {margin-left:25px; background:transparent; border:0;} .tree ul {display:none; padding-left:17px;} .tree li.unfold>ul {display:block;} .tree li {position:relative; padding-left:10px; border-left:1px solid #ccc; min-height:23px; line-height:23px;} .tree li::before,.tree li::after {content:''; position:absolute;} .tree li::before {top:10px; left:0; width:17px; height:0; border-bottom:1px solid #ccc;} .tree>li:first-child::after {top:0; left:-1px; width:1px; height:10px; background:#fff;} .tree li.last::after {top:11px; left:-1px; width:1px; height:100%; background:#fff;} .tree li span {position:absolute; top:4px; left:17px; width:17px; height:17px; background:#eee; text-align:center; line-height:17px; cursor:pointer; color:#333; border:1px solid #ccc;} .tree li.final span {cursor:default;} .tree li span::before {content:'+';} .tree li.unfold>span::before {content:'-';} .tree li.final span::before {content:'▒';}
3 Jquery
$('.tree').each(function(){ var $this = $(this); $this.find('li').each(function(){ //li에 if(!$(this).children('ul').length){ //자식 ul 없으면 $(this).addClass('final'); //final 클래스 부여한다 } if($(this).is(':last-child')){ //마지막 li이면 $(this).addClass('last'); //last 클래스 부여한다 } $(this).append(''); }); $this.find('li>span').on('click',function(){ //span 클릭하면 if($(this).parent('li').hasClass('unfold')){ //하위메뉴 열려 있을 경우 $(this).parent('li').removeClass('unfold'); //닫고 } else { //하위메뉴 닫혀 있을 경우 $(this).parent('li').addClass('unfold'); //연다 } }); });
4 결과
* 이미지 사용할 경우 span에 백그라운드로 넣음. 열려있을 경우의 클래스는 unfold, 하위메뉴가 더 이상 없는 경우의 클래스는 final.
*몇 depth이건 스크립트 수정 없이 그냥 추가하면 됨.
*몇 depth이건 스크립트 수정 없이 그냥 추가하면 됨.
Tags
:after, :before, css, html, if문, JavaScript, jquery, Tree, 제이쿼리 메뉴, 트리메뉴