jQuery的只有切換李點擊，而不是嵌套李

Question

當我得到了以下情況：

http://jsfiddle.net/7XrUM/

與這個js的轉換：

$("ul > li.closed").click(function() { 
    var li = $(this).closest('li'); 
    li.find(' > ul').slideToggle('fast'); 
    $(this).toggleClass("closed open"); 
}); 

當「標題」點擊，顯示了ul。但是，當我點擊圖像或它們之間的圖像時，它們會切換回來並再次隱藏。所以我只想在點擊「標題」時切換，而不是在點擊某些嵌套元素時切換，但我無法讓這個工作。

Answer 1

只是檢查，如果它實際上是被點擊的LI，而不是隻是冒泡的事件：

$("ul > li.closed").click(function(e) { 
    if (e.target === this) { 
     var li = $(this).closest('li'); 
     li.find(' > ul').slideToggle('fast'); 
     $(this).toggleClass("closed open"); 
    } 
}); 

FIDDLE

Answer 2

試試這個：

$(function() { 
    $("li.closed > ul").hide(); 

    $("ul > li.closed").click(function() { 
     var li = $(this).closest('li'); 
     li.find(' > ul').slideToggle('fast'); 
     $(this).toggleClass("closed open"); 
    }); 

    $("li.fl, li.fl > a").click(function (e) { 
     e.stopPropagation(); 
    }); 
}); 

DEMO HERE

Answer 3

最好的事情，你做窩ULD是包裝動作元素的HTML標籤有更多的控制：

<ul> 
    <li class="closed"><a href="javascript:void(0)">Headline 1</a> 
     <ul> 
      <li class="fl"><a href="#"><img src="#"></a></li> 
      <li class="fl"><a href="#"><img src="#"></a></li> 
     </ul> 
    </li> 

    ...  
</ul> 

這樣，如果你點擊了UL內任何會關閉顯示區域中，您將不必擔心。

$("ul > li.closed a").click(function() { 
    var li = $(this).closest('li'); 
    li.find(' > ul').slideToggle('fast'); 
    $(this).toggleClass("closed open"); 
});