jQuery選擇器不是這個孩子

Question

是否有任何方法將點擊事件附加到幾個元素，然後讓所有子元素（除了點擊這個元素的子元素）運行一個函數？

這是一個可怕的解釋，但我正在尋找這樣的事情：

$(".block_header").click(function(){ 
    $(".block_header span:not(this span)").toggleClass("collapse expand"); 
    $(".container:not(this+div.container)").slideToggle(); 
}); 

下面是一個示例HTML：

<h3 id="sender_header" class="block_header"><span>Sender</span></h3> 
<div id="sender_container" class="container"> 
    <p>Show or hide this, based on which H3 is clicked.</p> 
</div> 
<h3 id="receiver_header" class="block_header"><span>Receiver</span></h3> 
<div id="receiver_container" class="container"> 
    <p>Show or hide this, based on which H3 is clicked.</p> 
</div> 
<h3 id="delivery_header" class="block_header"><span>Delivery</span></h3> 
<div id="delivery_container" class="container"> 
    <p>Show or hide this, based on which H3 is clicked.</p> 
</div> 
<h3 id="items_header" class="block_header"><span>Items</span></h3> 
<div id="items_container" class="container"> 
    <p>Show or hide this, based on which H3 is clicked.</p> 
</div> 
.... etc, etc (many more of the same) 

希望這不是太複雜了。它會爲我節省很多代碼。

Answer 1

而不是排除選擇器中的元素，您可以使用not()函數，它接受DOM元素或jQuery對象從jQuery集合中刪除。

$(".block_header").click(function(e) { 
    $('.block_header span').not($(this).find('span')).toggleClass("collapse expand"); 

    $('.container').not($(this).next()).slideToggle(); 
}); 

Answer 2

$(".block_header").click(function(){ 
    $(".block_header span").not($('span', this)).toggleClass("active"); 
    $(".container").not($(this).next()).slideToggle(); 
}); 

Answer 3

做到像

$(".block_header").not(this).find("span").toggleClass("collapse","expand"); 

$(".container").not(this).not("div.container").slideToggle(); 

Answer 4

試試這個：

$(this).parent('h3').siblings('h3').children('span').addClass('active'); 
$(this).parent('h3').siblings('h3').next('div.container').slideToggle('active'); 

這應該做的伎倆！

但是，我可以假設你將只有一個活動？

如果是這樣的話，這是最簡單的：

$('.active').removeClass('active').parent('h3').next('div.container').slideUp(); 

希望幫助:)

編輯：

要格外聰明，存儲一個積極作爲變量。因此，對點擊：

$active = $(this); 

然後，下一次你可以做到這一點，沒有得到jQuery的去重新找到的元素：

$active.removeClass('active').parent('h3').next('div.container').slideUp(); 
$active = $(this);