파일트리를 이용한 접고 펴기 살펴보기(File Tree Expander)

jquery 쿡북에 파일트리를 이용해서 접고 펴는 기능이 있습니다. 이 부분을 저도 배울겸 좀 자세하게 살펴보기로 합니다.
마찬가지로 저작권과 예제는 http://jquery-cookbook.com 에 있습니다. 
현재 예제는 여기에 있으니 한번 살펴보세요.

다른 부분은 생략하고 jquery 부분만 살펴보겠습니다.
앞 예제에서 핵심은 tree.js 입니다. 이 부분이 제이쿼리로 접고 펴는 기능을 하는 코드가 들어 있습니다.
제가 아주 자세하게 주석을 달아놨으니 그냥 쭉~~ 읽으면 될겁니다.
참고로 들여쓰기를 하니까 블로그에서는 보기가 더 않좋습니다. 그래서 들여쓰기를 제거했습니다.
들여쓰기가 된 tree.js 를 첨부합니다.

tree.js

// 초기화.
function init_tree() {

// 요소가 존재하는가?
if (!$('ul.tree').length) { // tree클래스를 가지고 있는 ul이 길이가 없다면(!)
	return; // 빠져나간다.
}

// 확장과 축소.
$('p.tree_controls a.expand_all, p.tree_controls a.collapse_all').click(function() {
//a.expand_all, a.collapse_all 를 클릭하면 { } 부분을 실행해라.

// 클래스를 확인한다.
if ($(this).hasClass('expand_all')) { 
//만약 클릭한 요소에 클래스 expand_all 있으면(hasClass)

$(this).parent('p').next('ul').find('a.tree_trigger').addClass('tree_trigger_expanded').end().find('ul').addClass('tree_expanded'); 
// $(this) 클릭한 요소의 부모 P[.parent('p')]를 찾고 
// 다음요소인 ul을 찾고[next('ul')] 
// 클래스 .tree_trigger를 가지고있는 a를 찾아[find('a.tree_trigger')]
// 클래스 tree_trigger_expanded를 추가해라[addClass('tree_trigger_expanded')]
// 그다음 하던작업 즉 클래스 추가하는 작업을 중지해라 end()
// 그리고 ul을 찾아서[find('ul')] 
// ul 에 클래스 tree_expanded를 추가해라[addClass('tree_expanded')] 

return false;
} else { 
// 만약 클릭한 요소에 클래스 expand_all 없으면

$(this).parent('p').next('ul').find('a.tree_trigger').removeClass('tree_trigger_expanded').end().find('ul').removeClass('tree_expanded');
// 위와 설명은 같고, 클래스 tree_trigger_expanded 를 삭제해라 [removeClass('tree_trigger_expanded')]
// 위와 설명은 같고, 클래스 tree_expanded 를 삭제해라 [removeClass('tree_expanded')]
}

// 링크로 이동하지 않는다.
this.blur();
return false;

});

// 트리의 클릭 이벤트를 바인딩한다.
$('ul.tree a.tree_trigger').live('click', function() {

// 다음 <ul> 이 hidden인가?
if ($(this).next('ul').is(':hidden')) { 
// 만약 클릭한 요소 즉  a.tree_trigger 의 다음요소 ul이[next('ul')] 감쳐져있다면[is(':hidden')]

$(this).addClass('is(':hidden')').next('ul').addClass('tree_expanded');
// 거기에 클래스를 추가해라[$(this).addClass] 어떤클래스를??
// 감쳐져있는 [is(':hidden')] 다음요소 ul[next('ul')]을 찾아서 tree_expanded 클래스를 추가해라[addClass('tree_expanded');]

} else { 
// 아니면 즉 감쳐져 있지 않으면

$(this).removeClass('tree_trigger_expanded').next('ul').removeClass('tree_expanded');
// 클래스 tree_trigger_expanded를 삭제하고[removeClass('tree_trigger_expanded')]
// 다음요소 ul을 찾아서 클래스 tree_expanded를 삭제해라[next('ul').removeClass('tree_expanded')]
}

// 링크로 이동하지 않는다.
this.blur();
return false;
});

// 마지막 <li>에 클래스를 추가한다.
$('ul.tree li:last-child').addClass('last');
// ul.tree에서 마지막 자식인 li에[$('ul.tree li:last-child')]
// 클래스 last 를 추가해라[addClass('last')]

// 트리거의 상태를 변경한다.
$('ul.tree_expanded').prev('a').addClass('tree_trigger_expanded');
// ul 클래스 tree_expanded의[ul.tree_expanded]
// 앞 요소인 어트리뷰트 a[prev('a')]에
// tree_trigger_expanded 클래스를 추가해라[addClass('tree_trigger_expanded')]

}

// 작업시작.
$(document).ready(function() {
	init_tree();
});

어지간한것은 주석을 달아놨으니 알 수 있을겁니다.
이 부분을 잘 확장해서 이용하면 좀더 좋은 기능을 가진 코드를 만들수 있을것 같습니다.
예제로 코드 전문을 가지고 있는 html 파일을 올려드릴테니 html 을 살펴보시기 바랍니다.

1.html