jQuery 选择器不是这个孩子

Question

有没有办法将一个点击事件附加到几个元素，然后让所有子元素到该元素，除了 THIS 的子元素（单击的那个）之外，以运行一个函数？

这是一个糟糕的解释，但我正在寻找这样的东西：

$(".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);