트리구조의 네비게이션

월요일, 12월 20th, 2010 at 14:30 @ jQuery studing http://songee.ly.lv/wp/2010/12/20/26/trackback

모바일 기기에서 해당 내용이 제대로 보이지 않을 수 있습니다.

그냥 단순히 jQuery.com에 있던 예제에
아주 약간의 기능 추가를 했을 뿐인 단순한 트리구조의 네비게이션 코드입니다.

예제

item 1
- sub item 1-a
- sub item 1-b
item 2
- sub item 2-a
- sub item 2-b

소스보기

<!-- mark up -->
<ul>
  <li>item 1
    <ul>
      <li>sub item 1-a</li>
      <li>sub item 1-b</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>sub item 2-a</li>
      <li>sub item 2-b</li>
    </ul>
  </li>
</ul>
/* js source */
<script>
  function handler(event) {
   var $target = $(event.target);
    if( $target.is("li") ) {
     $target.prevAll().children().hide();
     $target.nextAll().children().hide();
     $target.children().toggle();
    }
   }
 $("ul").click(handler).find("ul").hide();
</script>