>  기사  >  웹 프론트엔드  >  jquery는 TreeView 텍스트 상위 노드를 클릭하여 하위 노드를 확장/축소하도록 구현합니다.

jquery는 TreeView 텍스트 상위 노드를 클릭하여 하위 노드를 확장/축소하도록 구현합니다.

WBOY
WBOY원래의
2016-05-16 17:44:031512검색

현재는 더 이상 사용되지 않는 계정에 이전에 게시되었던 에세이를 인육으로 이곳으로 옮길 수 있습니다.
한동안 회원가입을 하고 너무 바빠서 아직 글을 쓰지 못했습니다. 갑자기 뭔가를 기록하고 요약하는 데 시간이 좀 필요하다는 생각이 들었습니다. 음, 여기서부터 시작됩니다.

오늘은 고객이 메뉴의 상위 노드(TreeView로 구현)를 클릭하라고 하면 노드를 확장합니다. 이것은 매우 일반적인 기능이어야 한다고 생각하여 검색해 보니 대부분이 js에서 구현되지 않은 것으로 나타났습니다. 일부 js 구현은 작성하기가 까다롭기 때문에 직접 작성하는 것이 좋을 것입니다.

첫 번째 아이디어는 jquery는 TreeView 텍스트 상위 노드를 클릭하여 하위 노드를 확장/축소하도록 구현합니다., 텍스트를 클릭하면 왼쪽의 ' ' 이벤트가 실행되도록 하는 것입니다. 소스 코드를 확인하고 ' ' 이벤트가 다음과 같은지 확인하세요.
javascript :TreeView_ToggleNode(ctl00_body__menuTree_Data,0, document.getElementById('ctl00_body__menuTreen0'),' ',document.getElementById('ctl00_body__menuTreen0Nodes'))
좋아, 다음 단계는 모든 상위 노드를 필터링하고 이벤트 처리를 추가하는 것입니다. 전체 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.