6

クリック イベントを複数の要素にアタッチし、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)

これがあまり複雑でないことを願っています。多くのコードを節約できます。

4

4 に答える 4

15

セレクターで要素を除外するのではなくnot()、jQuery セットから削除する DOM 要素または jQuery オブジェクトを受け入れる関数を使用できます。

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

    $('.container').not($(this).next()).slideToggle();
});
于 2012-05-15T10:48:34.443 に答える
3

これを試して：

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

それでうまくいくはずです！

ただし、アクティブになるのは 1 つだけだと思いますか?

その場合、これが最も簡単です。

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

それが役立つことを願っています:)

編集：

さらに賢くするには、アクティブなものを変数として保存します。クリックすると：

$active = $(this);

次に、jQuery に再度要素を検索させることなく、これを行うことができます。

$active.removeClass('active').parent('h3').next('div.container').slideUp();
$active = $(this);
于 2012-05-15T10:52:40.000 に答える
2 
$(".block_header").click(function(){
    $(".block_header span").not($('span', this)).toggleClass("active");
    $(".container").not($(this).next()).slideToggle();
});
于 2012-05-15T10:49:35.090 に答える
1

好きにする

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

 $(".container").not(this).not("div.container").slideToggle();
于 2012-05-15T10:50:30.347 に答える