2

active要素とその子以外のページ上の何かがクリックされたときに、クリックされた要素からのクラスを削除しようとしています。

セレクターを正しく使用していないことはわかっていnot()ますが、これは私の最善の推測です。また、子供に関する部分を追加する方法もわかりません（？）

$(document).ready(function () {
    $('#content_container').on('click', '.wrapper-dropdown-1', function () {
        //close all open dropdowns
        $('.wrapper-dropdown-1').not(this).removeClass('active');


        //close dropdown if anywhere on the body is clicked
        $('body').on('click', ('#content_container').not(this), function () {
            $(this).removeClass('active');
        }); 
        //Uncaught TypeError: Object #content_container has no method 'not'


        var dropdown = $(this);
        dropdown.toggleClass('active');
    });
});

//Uncaught TypeError: Object #content_container has no method 'not'

それと 4 行目のこの成功した実装の違いがわかりません。

$('.wrapper-dropdown-1').not(this).removeClass('active');
4

2 に答える 2

0 
var dropdown;

$('body').on('click', function () {
    if ($(e.target).closest(dropdown).length) return;
    $('.wrapper-dropdown-1').removeClass('active');
}); 

$('#content_container').on('click', '.wrapper-dropdown-1', function () {
    $('.wrapper-dropdown-1').not(this).removeClass('active');
    dropdown = $(this).toggleClass('active');
});

（常に$(e.target)）の代わりに（元のイベント要素）が使用されていることに注意してください。$(this)body

このようにする必要がある理由は:not、イベントフィルターでスタイルセレクターを使用しようとするとon、そのゾーン内の要素ではイベントがトリガーされないが、そのゾーンの親ではトリガーされないためです。のイベントハンドラーnotは、イベントの伝播を停止せず、選択に含めるだけです。（キャプチャされたゾーン内でのイベントの伝播を停止することもこれに対する別のアプローチですが、アプリがより複雑になるにつれて維持するのが困難になるため、お勧めしません。）

また、別のイベントハンドラー内でイベントハンドラーを宣言しています。これには他の問題があります。たとえば、その領域をクリックするたびに、で複数のハンドラーを取得するという事実ですbody。イベントハンドラーに名前を付けて、手動でバインドおよびバインド解除することもできますが、このハンドラーを常に実行させる方がおそらく簡単です。今後、UIで他の「他の場所をクリックしてキャンセル」タイプのゾーンを思いついたときに、それに追加したくなる可能性があります。

于 2013-02-22T01:05:25.430 に答える
0

jsBin

$('#content_container').on('click', '.wrapper-dropdown-1', function(evt){
  $(this).toggleClass('active');
});

$('body').click(function(evt){
  var el = $(evt.target).is('.wrapper-dropdown-1') ? evt.target : null;
  $('#content_container .wrapper-dropdown-1').not(el).removeClass('active');
});
于 2013-02-22T02:49:28.543 に答える