트리 메뉴 구현하기
중요도: 5
노드를 클릭하면 자손 노드가 보이거나 숨겨지는 트리 메뉴를 구현해보세요.
구체적인 요구사항은 다음과 같습니다.
-
단 하나의 이벤트 핸들러(이벤트 위임 사용하기)
-
노드(텍스트) 바깥(빈 곳)을 클릭하면 아무 일도 일어나지 않아야 합니다.
해답은 두 파트로 나뉩니다.
- 트리에 있는 모든 텍스트를
<span>이 감싸도록 합니다. 이렇게 하면 CSS:hover를 사용해 마우스 오버 시 글씨를 굴게 해주는 효과를 줄 수 있고<span>이 차지하는 너비가 텍스트의 너비와 정확히 일치하기 때문에 텍스트에만 클릭 이벤트가 동작하도록 할 수 있습니다. - 루트 노드인
tree에 핸들러를 추가하고 클릭 이벤트가<span>으로 감싼 텍스트에만 동작하도록 합니다.