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)

希望这不会太复杂。它会为我节省很多代码。

- Richard Harris

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();
});

- Matt

---

谢谢，我觉得这非常有帮助。 - esd

Answer 2

试试这个：

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

- will

---

哇塞，你们太厉害了！提供了那么多有用的答案。非常感谢！哦，对了：只有一个会处于激活状态。 - Richard Harris

我想为你的回答点赞，但我只有11个声望值，需要15个才能进行操作。很抱歉。如果我可以选择两个“已解决”的方案，我也会选择你的，因为它提供了许多好的技巧。谢谢！ - Richard Harris

Answer 3

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

- The System Restart

Answer 4

就像这样做

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

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

- Imdad