從父開關排除子複選框

Question

我有一系列內容和標題div來顯示一些數據。另外每個頭部都有一個複選框。

<div id="content-1"> 
    <div class="head"><input type="checkbox" name="check-1"/> Header</div> 
    <div class="content">Content</div> 
</div> 
<div id="content-2">...</div> 
<div id="content-3">...</div> 

我用來跟隨jQuery顯示/隱藏內容div通過點擊各自的頭div。

$(".head").toggle(
    function(){ $(this).nextAll().slideDown('200'); }, 
    function(){ $(this).nextAll().slideUp('200'); } 
); 

問題是點擊複選框會顯示/隱藏內容div，並且複選框不能被選中/取消選中。我希望內容切換隻發生在單擊head div時，並且複選框正常工作。

任何幫助非常感謝。

Answer 1

您遇到的問題是由於您只有一個處理程序有兩個單擊事件。你的兩個事件是：單擊head-div並單擊該head-div內的複選框。由於您只指定了一個處理程序，因此bot事件將被委託給該處理程序（因爲您的複選框包含在head-div中），因此會同時切換兩者。

您需要添加一個處理程序，它將更具體地行事。用這樣的選擇器：

$(".head :checkbox").click(function(event){ 
$(this).attr('checked','checked'); 
}); 

編輯：未經測試，但我認爲這應該做的伎倆。

Answer 2

您可以檢查是否$(event.target).is('.head')爲了做切換。

$('.head').toggle(
    function(e){ $(e.target).is('.head') && 
        $(this).nextAll().slideDown('200') }, 
    function(e){ $(e.target).is('.head') && 
        $(this).nextAll().slideUp('200') } 
) 

的清潔器的選擇是，以檢查是否event.target和this是不同的，並且然後停止事件傳播。否則，請滑動。

$('.head').toggle(
    function(e){ e.target !== this ? e.stopPropagation() 
            : $(this).nextAll().slideDown(200) }, 
    function(e){ e.target !== this ? e.stopPropagation() 
            : $(this).nextAll().slideUp(200) } 
) 

我沒有測試它，thoughit在我看來，一個合理的解決方案。

UPDATE：

事實上，撥動調用了preventDefault，因此該解決方案應該是在這行：

$('.head').bind('click', function(e){ 
    e.target !== this 
     ? e.stopPropagation() 
     : $(this).nextAll().slideToggle(200) 
});