jQuery Tree메뉴 간단하게 만들기

jQuery Tree(재귀호출).zip

jQuery Tree.zip

유용한 jQuery를 이용하여 트리구조를 만들어보았습니다. 여러가지 UI가 있겠지만 이번에 만들어본것은 모든 아이템에 링크가 가능하고 "+", "-" 아이콘을 이용하여 하위 메뉴를 열고 닫을 수 있습니다. jQuery는 정말 사용할 수록 좋은 점이 너무 많은데요. 이번에 중점적으로 보아야 할 것은 두가지가 있는데요.

한가지는 어떠한 앨리먼트를 가지고 있는 개체를 선택하는 것인데요. :has(ul) 을 사용하게 되면 ul 을 가지고 있는 모든 개체를 선택할 수 있게 됩니다.

그리고 다른 한가지는, 자식요소를 선택하는 필터인데요. li:last-child 라는 것을 이용해서 li 중에 맨 마지막 자식요소 인것을 한번에 모두 선택할 수 있습니다.

정말 편한 기능이지요? 이것을 사용하게 되면 html에 일일히 클래스명을 주지 않아도 공통점이 있는 자신이 원하는 요소마다 같은 클래스명을 한번에 줄 수 있게 됩니다. 그렇다면 본격적으로 한번 보면 좋을 것 같은데요. 작업의 스트레스와 피로도를 최소화 하기 위해 걸그룹과 함께 작업하였습니다. jQuery 와 걸그룹의 절묘한 만남!

위와 같은 형태로 트리구조를 만들어 보았습니다.

http://blog.nettor.com/jquery_tree/tree.html
출처 : http://htglss.tistory.com/100