가장 낮은 레벨의 링크를 제외하고 중첩 된 ul 내의 모든 링크를 비활성화하는 방법은 무엇입니까?

Question

의 내가이 같은 목록이 있다고 가정 해 봅시다 :

<ul> 
<li><a href="Sitepages/Introduction.aspx">Introduction</a> 
    <ul> 
     <li><a href="Sitepages/AboutMe.aspx">About me</a></li> 
     <li><a href="Sitepages/AboutTheCompany.aspx">About the company</a> 
      <ul> 
       <li><a href="Sitepages/History.aspx">History</a></li> 
       <li><a href="Sitepages/Locations.aspx">Locations</a> 
        <ul> 
         <li><a href="Sitepages/Belgium.aspx">Belgium</a></li> 
         <li><a href="Sitepages/France.aspx">France</a></li> 
         <li><a href="Sitepages/Germany.aspx">Germany</a></li> 
         <li><a href="Sitepages/Norway.aspx">Norway</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</li> 
</ul> 

난 단지 최고 수준의 처음에 표시되도록 아코디언으로이 중첩 된 UL를 켤 수있는 스크립트가 있습니다. 누군가 다른 li을 포함하는 li 내부의 링크를 클릭하자 마자 그 링크를 확장합니다.

링크가 제공되지 않을 때 모든 작업이 정상적으로 작동하지만 가장 낮은 레벨을 제외한 모든 "a"태그의 기본 동작을 비활성화하려고합니다. 그래서 가장 낮은 수준의 li 태그는 내부 링크와 함께 활성 링크 여야합니다.

$this.find("li").each(function(){ 
    if ($(this).find("ul").size() != 0) { 
     if ($(this).find("a:first")) { 
      $(this).find("a:first").click(function(){ return false; });   
    } 
}); 

최상위 링크 (소개) 클릭시 기본 동작 (리디렉션)을 무시하지만, 확장하고 쇼 :

다음은 최상위 링크의 기본 동작을 비활성화 자바 스크립트 코드입니다 "About me"및 "About company"옵션을 선택하십시오. 그러나 "회사 정보"를 클릭해도 여전히 리디렉션됩니다.

마지막 예제 (예 : 국가 이름)를 제외하고 모든 "a"태그의 기본 동작을 false로 설정하려면 코드에서 무엇을 편집해야합니까?

도움 주셔서 감사합니다.

Answer 1

두 개의 핸들러를 설정할 수 있습니다. 하나는 정렬되지 않은 목록에있는 모든 링크를 해제하고 다른 하나는 마지막 순서가없는 목록에 클릭을 처리하기 위해 :

// Disable all links within an ul 
$('ul').on("click", "a", function(e){ 
    e.preventDefault(); 
}); 

// second handler to bind to the last ul 
$('ul:last').on("click", "a", function(e){ 
    window.location.href = $(e.target).attr('href'); 
}); 

바이올린 : 그들은 왜 일을 안하는 경우가 연결 http://jsfiddle.net/puleos/CjB99/