jQuery选择器不是这个孩子
是否有任何方法将点击事件附加到几个元素,然后让所有子元素(除了点击这个元素的子元素)运行一个函数?jQuery选择器不是这个孩子
这是一个可怕的解释,但我正在寻找这样的事情:
$(".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)
希望这不是太复杂了。它会为我节省很多代码。
而不是排除选择器中的元素,您可以使用not()
函数,它接受DOM元素或jQuery对象从jQuery集合中删除。
$(".block_header").click(function(e) {
$('.block_header span').not($(this).find('span')).toggleClass("collapse expand");
$('.container').not($(this).next()).slideToggle();
});
$(".block_header").click(function(){
$(".block_header span").not($('span', this)).toggleClass("active");
$(".container").not($(this).next()).slideToggle();
});
感谢您的努力,但这根本不起作用。 –
@RichardHarris我更新了我的答案。请检查 –
你走了。这有帮助。非常感谢! :) –
做到像
$(".block_header").not(this).find("span").toggleClass("collapse","expand");
$(".container").not(this).not("div.container").slideToggle();
这使我走向正确的方向。干杯! –
很高兴知道它解决了您的问题。干杯! – Imdad
试试这个:
$(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);
圣牛你们都很棒!这么多有用的答案。非常感谢!哦,是的:一次只有一个活跃。 –
我想为你投票,但我需要15个声望,我拥有的是11个。对不起。如果我可以将两个解决方案标记为“已解决”,我会为您提供很多好的提示。干杯! –
辉煌!非常感谢。 –
谢谢,我发现这非常有帮助 – esd