만들기 링크() 나는이 마크 업이

Question

일이 jQuery로

<ul><li id="link-notifications"> 
    <ul class="list-notifications" style="display:none"> 
    <li><a href="/link/to">Item 1</a></li> 
    </ul> 
</li> 
</ul> 

:

$('#link-notifications').click(function(e){ 
    e.preventDefault(); 
    e.stopPropagation();   
    $(this).find('.list-notifications').slideToggle('medium');  
}); 

하지만를 목록 아래로 슬라이드, 내가 링크를 클릭 할 때마다 목록 만 다시 슬라이드됩니다. stopPropagation이 작동하여 추가했지만 작동하지 않는다고 들었습니다. slideToggle 콜백에 추가하려고 시도했지만 slideUp 동작 만 중지합니다. 어떤 아이디어?

Answer 1

이 click 이벤트를 바인딩 추가합니다.

$('#link-notifications, :not("#link-notifications > *")').click(function(e){ 
    e.stopPropagation();   
    $(this).find('.list-notifications').slideToggle('medium');  
}); 

Working sample

Answer 2

HTML

<ul> 
    <li id="link-notifications"> 
    <a href="#">link-notifications</a> 
     <ul class="list-notifications"> 
      <li><a href="#">Item 1</a></li> 
     </ul> 
    </li> 
</ul>​ 

jQuery를

$('#link-notifications>a').click(function(event){ 
    $(this).siblings('ul.list-notifications').slideToggle('medium');  
});​ 

는 내가 밀어하지만 형제 싶었던의 부모에없는 이벤트를 부착. 이것은 이상한 사건들이 버블 링하는 것을 막아줍니다.

바이올린 : http://jsfiddle.net/iambriansreed/59e3F/

Answer 3

당신은 그 이벤트 내부하지만 링크의 클릭으로 e.stopPropagation() 필요하지 않습니다.

그냥에만 내부 내용을 탈출 #link-notifications ANS에

$('.list-notifications').click(function(e){ 
    e.stopPropagation(); 
}); 

http://jsfiddle.net/N6pYU/1/