有没有办法将click事件附加到多个元素,然后将所有子元素都添加到该元素中,除了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)
希望这不是太复杂。它会为我节省很多代码。
答案 0 :(得分:14)
您可以使用not()
函数来接受要从jQuery集中删除的DOM元素或jQuery对象,而不是排除选择器中的元素。
$(".block_header").click(function(e) {
$('.block_header span').not($(this).find('span')).toggleClass("collapse expand");
$('.container').not($(this).next()).slideToggle();
});
答案 1 :(得分:3)
试试这个:
$(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);
答案 2 :(得分:2)
$(".block_header").click(function(){
$(".block_header span").not($('span', this)).toggleClass("active");
$(".container").not($(this).next()).slideToggle();
});
答案 3 :(得分:1)
喜欢
$(".block_header").not(this).find("span").toggleClass("collapse","expand");
$(".container").not(this).not("div.container").slideToggle();