트리 뷰를 구현하는 가장 좋은 방법은 무엇입니까?

Question

나는 다음과 같이 중첩 된 UL 리튬 태그를 사용하여 구성 트리보기 일하고 있어요 :

<ul> 
     <li>Level 1 a 
      <ul> 
       <li>Level 2 a</li> 
       <li>Level 2 b 
        <ul> 
         <li>Level 3 a</li> 
         <li>Level 3 b</li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li>Level 1 b</li> 
    </ul> 

내가 아래와 같이 트리보기를 탐색 할 때 목록 항목 셀을 클릭 할 원을 :

나는 우리가 다음 목록 항목에서 자바 스크립트 기능을 추가 할 수 있음을 알고

<li onClick="redicrectPage(url)"> 

과을 추가 하위 항목을 클릭하면 상위 이벤트가 발생하지 않도록이 트리거됩니다.

내 질문에 위의 구현에 대한 더 나은 크로스 브라우저 해결 방법은 무엇입니까?

고맙습니다.

Answer 1

CSS에서 중첩 된 메뉴 구조를 만들어 버블 링 문제를 제거 할 수 있습니다. http://jsfiddle.net/steveukx/HfDBA/의 예는 메뉴의 깊이를 알지 못해도 동일한 선택자를 반복 할 수 있도록 직접 자손 선택기를 사용하지만이 기능이없는 브라우저를 지원하는 경우 클래스를 이름에 추가하도록 HTML을 변경해야합니다 트리의 깊이를 지정하고 CSS의 깊이를 지정합니다.

는 HTML :

<ul class="menu"> 
    <li><a href="#">Level 1 a</a> 
     <ul> 
      <li><a href="#">Level 2 a</a></li> 
      <li><a href="#">Level 2 b</a> 
       <ul> 
        <li><a href="#">Level 3 a</a></li> 
        <li><a href="#">Level 3 b</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Level 1 b</a></li> 
</ul>​ 

CSS "JQuery와 메뉴 예"인터넷 검색

* { font-family: tahoma, sans-serif; font-size: 10pt; } 
a { text-decoration: none; color: #fff; display: block; } 
ul { display: none; } 
ul.menu, li:hover > ul { display: block; } 
li > ul { position: absolute; top: 25%; left: 100%; margin-left: -1em; 
    box-shadow: -1px 1px 1px rgba(0,0,0,0.5); z-index: 1000; } 
li { position: relative; padding: 0.1em 0.5em; width: 100px; background: silver; 
    box-shadow: -1px 1px 1px rgba(0,0,0,0.5); margin: 1px 1px 0; } 
li:hover { background-color: #333; } 
li:hover > a { color: #FAFAFE; }