0

基本的に、クリックすると別の要素がslideToggleする要素があります。ただし、私が求めているのは、メインの親要素内にある別の要素、たとえば画像です。これをクリックしても、slideToggleイベントは発生せず、別のイベントを発生させるために使用できます。

私のコードの簡略版はここにあります：

http://jsfiddle.net/s3d5D/6/

..画像の代わりとなる青いボックス。

マークアップ：

<div class="holder">
    <div class="section"><div class="image"></div></div>
    <div class="hidden"></div>
</div>

jQuery：

$('.hidden').hide();
$(document).on('click', '.section', function(){
    $(this).nextAll('.hidden:first').slideToggle(500);
});
4

3 に答える 3

1

子要素でイベントの伝播を停止できます。

$(document).on('click', '.image', function (e) {
    e.stopPropagation();
});

これが実際の例です。フィドルで、既存のon呼び出しを上記と連鎖させていることに注意してください。したがって、複数のjQueryオブジェクトを作成する必要はありません。

于 2012-07-04T19:48:23.683 に答える
1

イベント引数オブジェクトのtargetプロパティには、実際にクリックされた要素が含まれています。それをthis（関連する要素を含む）と比較して、それがクリックされたものなのか、それとも他の何かな.sectionのかを調べることができます。.section

$(document).on('click', '.section', function(e){
    if (e.target == this) {
        $(this).nextAll('.hidden:first').slideToggle(500);
    }
});

また、このアプローチの実際を説明するために、あなたのフィドルをフォークしました。

于 2012-07-04T19:53:33.823 に答える
1

私はJamesとほぼ同じアプローチを使用しましたが、代わりに、 2つ以上の呼び出しを連鎖させるのではなく、メソッド内のイベントevent.stopPropagation()のターゲットを評価することを選択しました。：clickon()on()

$(document).on('click', '.section, .image', function() {
    var thisClass = $(this).is('.section') ? 'section' : 'image';
    if (thisClass == 'section') {
        $(this).nextAll('.hidden:first').slideToggle(500);
    }
    else if (thisClass == 'image') {
        e.preventDefault();
    }
});​

JSフィドルデモ。

于 2012-07-04T19:56:50.983 に答える