중첩 된 탐색 클릭 논리 문제

Question

나는 간단한 수직 탐색을 통해 클릭시 목록 항목의 자식을 표시하려고 노력해 왔습니다.

그러나 중첩 된 항목 중 하나를 클릭하면 하위 목록 항목이 본질적으로 상위 목록 항목을 '클릭'합니다. 내 클릭 기능으로 '.active'를 제거하고 사용자가 선택한 페이지로 리디렉션되기 바로 전에 상위 목록 항목을 닫습니다. 이것은 나빠 보이고 완전히 짜증나게합니다.

클릭 기능을 어린이 목록 항목에 영향을주지 않게하는 방법에 대한 조언이 있으십니까?

$('#sidebar > li.parent').click(function(){ 
    if($(this).hasClass('active')){ 
       $(this).removeClass('active'); 
     }else{ 
       $(this).addClass('active'); 
    } 
}); 

당신은 부모 요소로 버블 링 클릭 이벤트를 방지하기 위해 stopPropagation을 사용하는 하위 요소에 대한 클릭 핸들러를 추가 할 수

<aside id="tertiary" class="tertiary"> 
    <ul id="sidebar" class="sidebar"> 
     <li class="active"><a href="/">Portal</a></li> 
     <li><a href="ecards.html">Start Here</a></li> 
     <li><a href="ecards.html">Cards</a></li> 
     <li class="parent"><a href="programs.html">Programs</a> 
      <ul> 
       <li><a href="#">LOS</a></li> 
       <li><a href="#">Safety</a></li> 
       <li><a href="#">Retirement</a></li> 
       <li><a href="#">Wellness</a></li> 
       <li><a href="#">Investors</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Marketplace</a></li> 
     <li><a href="#">Reporting</a></li> 
    </ul> 
</aside> 

Answer 1

HTML :

$('#sidebar > li li').click(function(e){ 
    e.stopPropagation(); 
}); 

추가 읽기 : MDN docs for Event.

Answer 2

당신은

$('#sidebar > li.parent').click(function (e) { 
    e.preventDefault(); 
    $(this).toggleClass('active'); 
}).find("ul li").click(function(e){ 
    e.stopPropagation();  
}); 

e.preventDefault()

http://jsfiddle.net/TrueBlueAussie/g6a496Lf/이 예에서 상위에 링크 클릭을 중지 만이 아니라 부모 ... 아이들의 전파를 중지해야합니다. e.stopPropagation()은 DOM을 버블 링하는 자식 클릭을 중지합니다. 당신이 이벤트의 전파를 중지하기 전에

$('#sidebar > li.parent ul li").click(function(e){ 
    e.stopPropagation();  
}); 

Answer 3

why you shouldn't do so에 스핀 업 시간이 걸릴 :이 같은 별도의 선택이 필요하지 않은 있도록

나는 함께 두 개의 핸들러 체인. css-tricks.com에서

, "이벤트 전파를 중지의 위험", 매우 간단히 :.

는 "하나의 덧없는 이벤트를 수정하는 것은 처음에 무해한 보일 수도 있지만, 위험에 올 때 당신을 사람들이 기대하는 행동을 변경하고 다른 코드가 의존하는 경우 버그가 생길 수 있습니다. 단지 시간 문제 일뿐입니다. "

"훨씬 더 나은 해결책은 논리가 완전히 캡슐화 된 단일 이벤트 처리기를 갖는 것이고, 유일한 책임은 메뉴가 주어진 이벤트에 대해 숨겨져 있어야하는지 여부를 결정하는 것입니다." 그와

는

$('#sidebar').on('click', function(e) { 
    var $target = $(e.target).closest('li'); 

    if ($target.hasClass('parent')) { 
     $target.toggleClass('active'); 
    } 
}); 

작동 예처럼 뭔가를 할 수 말했다되는 : http://jsfiddle.net/g6a496Lf/1/