jquery通過點擊子元素禁用動畫

Question

我有一些列表元素，當用戶點擊父列表元素時，這些列表元素將被摺疊。問題是，當使用點擊一個子列表項時，動畫也會啓動。

<ul> 
     <li class="folder">foo -- animation shall be enabled here 
      <ul> 
       <li><a href="http://google.com/" target="_blank">google</a></li> 
       <li><a href="#" >item2</a></li> 
       <li><a href="#" >item3</a></li> 
       <li><a href="#" >item4</a></li> 
      </ul> 
     </li> 
     <li class="folder">bar -- and animation shall be enabled here 
      <ul> 
       <li><a href="#" >item1</a></li> 
       <li><a href="#" >item2</a></li> 
       <li><a href="http://heise.de" target="_blank">Heise</a></li> 
       <li><a href="#" >item4</a></li> 
      </ul> 
     </li> 
    </ul> 

如何通過點擊子項來防止動畫？ 在此先感謝！

Answer 1

$('li').on("click",function(){ 
    $(this).parent(".folder").stop(true, true); 
}); 

將工作在這個

Answer 2

哦，找到自己的解決方案

$('li.folder').on('click', function(event){ 
    if(event.target === this){ 
     $(this).children().animate({ 
      height:'toggle' 
     },600); 
    } 
}); 

謝謝你的好意！

Answer 3

可以代替停止所有類似事件的即時傳播：

$(function() { 
    $('li li').on('click', function(e) { 
     e.stopImmediatePropagation(); 
     alert('Hi from inner <li>!'); 
    }); 
    $('li').on('click', function() { 
     alert('Hi from parent <li>!'); 
    }); 
});