jQuery - 點擊LI，顯示/隱藏UL - 點擊LI：a href，繼續顯示UL並在空白窗口中打開

Question

感謝SO！的精彩貢獻者！當你開始理解它時，jQuery更酷。 :)

所以我有一個李，當點擊顯示/隱藏一個孩子UL。我想要做的是能夠點擊LI內的鏈接打開一個空白窗口，但也不會關閉孩子UL。空白窗口開口做

a[href^="http://"]').attr("target", "_blank"); 

但是，我不知道如何「迴歸：假」的李這樣的空白窗口打開時不會關閉UL。我希望用戶在關閉空白窗口時能夠看到他們所在的孩子UL。

如果這不明確，請讓我知道。

謝謝！

Answer 1

我想你正在尋找的可能是event.stopPropagation（）

這裏的文檔：http://api.jquery.com/event.stopPropagation/

基本上，發生的事情是，當你點擊<a>，點擊事件被觸發，但由於它包含在<li>中，因此也觸發點擊事件。這個從小孩到父母的事件過程稱爲事件冒泡。你可以使用event.stopPropagation（）來停止它。

讓我們假設你有一個HTML的結構如下所示：

<ul> 
    <li class="reveal">One<br /> 
     <a href="http://www.google.com" target="_blank">Google</a> 
      <ul> 
       <li>a</li> 
       <li>b</li> 
       <li>c</li> 
     </ul> 
    </li> 
    <li class="reveal">Two<br /> 
     <a href="http://www.google.com" target="_blank">Google</a> 
      <ul> 
       <li>a</li> 
       <li>b</li> 
       <li>c</li> 
     </ul> 
    </li> 
    <li class="reveal">Three<br /> 
     <a href="http://www.google.com" target="_blank">Google</a> 
      <ul> 
       <li>a</li> 
       <li>b</li> 
       <li>c</li> 
     </ul> 
    </li> 
</ul> 

此外，我們會說你有一個CSS規則：

ul ul { display: none; } 

應用此jQuery的，你應該得到的結果你正在尋找：

$(function() { 
    $('.reveal').click(function() { 
     $(this).children('ul').slideToggle(); 
    }); 

    $('.reveal a').click(function(event) { 
     event.stopPropagation(); 
    }); 
}); 

這裏是一個現場演示這在行動：http://jsfiddle.net/PaxTg/

Answer 2

您可能想看看event orders，然後在適當的時候停止傳播活動。