Bootstrap 프레임 워 크 트 리 메뉴(Tree)의 인 스 턴 스 코드 만 들 기

트 리 는 트 리 메뉴 를 말 합 니 다.이 글 은 하나의 인 스 턴 스 를 통 해 Bootstrap 프레임 워 크 에서 트 리 메뉴 를 만 드 는 방법 을 설명 합 니 다.
전제:Bootstrap 과 JQ 의 인용 을 먼저 추가 합 니 다.

<link rel="stylesheet" type="text/css" href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="external nofollow" >
<script src="bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js"></script>
<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>

HTML CODE

<div class="tree well">
 <ul>
 <li> <span><i class="icon-folder-open"></i>       </span>
  <ul>
  <li> <span><i class="icon-minus-sign"></i>     </span>
   <ul>
   <li> <span><i class="icon-leaf"></i>     </span> </li>
   </ul>
  </li>
  <li> <span><i class="icon-minus-sign"></i>     </span>
   <ul>
   <li> <span><i class="icon-leaf"></i>       </span> </li>
   <li> <span><i class="icon-minus-sign"></i>         </span>
    <ul>
    <li> <span><i class="icon-minus-sign"></i>     </span>
     <ul>
     <li> <span><i class="icon-leaf"></i>   </span> </li>
     <li> <span><i class="icon-leaf"></i>   </span> </li>
     </ul>
    </li>
    <li> <span><i class="icon-leaf"></i>     </span> </li>
    </ul>
   </li>
   <li> <span><i class="icon-leaf"></i>    </span> </li>
   </ul>
  </li>
  </ul>
 </li>
 </ul>
</div>

CSS CODE
(트 리 메뉴 에 스타일 을 추가 하여 Bootstrap 프레임 워 크 스타일 에 맞 게 합 니 다)

.tree {
 min-height:20px;
 padding:19px;
 margin-bottom:20px;
 background-color:#fbfbfb;
 border:1px solid #999;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
 -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
 box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
 list-style-type:none;
 margin:0;
 padding:10px 5px 0 5px;
 position:relative
}
.tree li::before, .tree li::after {
 content:'';
 left:-20px;
 position:absolute;
 right:auto
}
.tree li::before {
 border-left:1px solid #999;
 bottom:50px;
 height:100%;
 top:0;
 width:1px
}
.tree li::after {
 border-top:1px solid #999;
 height:20px;
 top:25px;
 width:25px
}
.tree li span {
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border:1px solid #999;
 border-radius:5px;
 display:inline-block;
 padding:3px 8px;
 text-decoration:none
}
.tree li.parent_li>span {
 cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
 border:0
}
.tree li:last-child::before {
 height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
 background:#eee;
 border:1px solid #94a0b4;
 color:#000
}

JS CODE

<script type="text/javascript">
 //       ，     
$(function(){
 $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
 $('.tree li.parent_li > span').on('click', function (e) {
  var children = $(this).parent('li.parent_li').find(' > ul > li');
  if (children.is(":visible")) {
   children.hide('fast');
   $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
  } else {
   children.show('fast');
   $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
  }
  e.stopPropagation();
 });
});
</script>

효과:
 
Bootstrap 스타일 에 맞 는 나 무 를 이렇게 만 들 었 습 니 다.장점 은 깔끔 하고 아름 답 습 니 다.
이것 은 demo 입 니 다.그래서 트 리 의 값 은 html 에 쓰 여 있 습 니 다.그러나 실제 항목 에 서 는 트 리 메뉴 가 동적 으로 생 성 되 지만 Bootstrap 은 TreeView 와 같은 컨트롤 을 제공 하지 않 습 니 다.데 이 터 를 연결 하면 나무 로 동적 으로 생 성 될 수 있 기 때문에 트 리 를 만 드 는 논 리 는 모두 JS 코드 로 수 동 으로 작성 해 야 합 니 다.이 과정 은 정말 좀 번거롭다.
물론 시중 에 봉 인 된 트 리 메뉴 의 플러그 인,DTree,TreeList widget,Ztree,jQuery 등 도 많 지만 외관 과 Bootstrap 프레임 이 좀 어 울 리 지 않 습 니 다.
이러한 절충 방법 은 장점 을 취하 여 단점 을 보완 하고 Bootstrap 의 스타일 을 봉 인 된 트 리 플러그 인 에 응용 하여 수 요 를 만족 시 키 는 것 이다.