jqueryセレクタヘルプ。指定されたセレクタ

Question

が、すべて私がオーバーレイメニュー開くには、以下の機能があります。メニューを非表示にするには

$('.context-switch').click(function() { 
     $(".context-switch-menu").toggle(); 
    }); 

を、私は「.context-SWITCH-外の任意の領域をクリックできるようにし、ユーザーをしたいと思いますメニュー」

私がしようとしています：（ない）が、成功しません。..

Answer 1

はこれを試して、我々は内側をクリックしたときに、私たちはあなたが要素自体をクリックしたときに関数を呼び出したい、とないていません要素。だから私たちは2つの小切手が必要です。

あなたがクリックした要素であるe.targetを使用します。

$("html").click(function(e){ 
    if(!$(e.target).is(".context-switch-menu") && 
     $(e.target).closest(".context-switch-menu").length == 0 
    ) 
    { 
     alert("CLICKED OUTSIDE"); 
    } 
}); 

ライブフィドル：イベントのバブリングので、これは困難なことがhttp://jsfiddle.net/Xc25K/1/

Answer 2

理由があります。

あなたはこのような何かを試すことができます。

$('.context-switch').click(function(e) { 
    e.stopPropagation(); 
    $(".context-switch-menu").toggle(); 
}); 

$(".context-switch-menu").click(function(e){ 
    e.stopPropagation(); 
}); 


$("body").click(function(e){ 
    $(".context-switch-menu").hide(); 
}); 

e.stopPropagation()はbodyハンドラにバブリングからclickイベントを防ぎます。それがなければ、.context-switchまたは.context-switch-menuへのクリックは、.context-switchクリックの効果を無効にするので、望ましくないボディーイベントハンドラーをトリガーします。 （状態が隠されている場合、すなわち、その後、あなたは、イベントが希望バブルを表示し、再度.context-switch-menuを隠してしまうbodyハンドラをトリガするためにクリックしてください。）テストを行わず

Answer 3

、この作品のような何か？：

$('.context-switch').click(function() { 
     $(".context-switch-menu").show(); 
    }); 
$(document).click(function() { 
     $(".context-switch-menu").hide(); 
    }); 

documentの代わりに、'html'または'body'を使用することもできます。

Answer 4

$('body').click(function(e) { 
    if ($(e.target).hasClass('context-switch')) { 
     return; 
    } 

    $(".context-switch-menu").hide(); 
}); 

$('.context-switch').click(function() { 
    $(".context-switch-menu").toggle(); 
    return false; 
}); 

Answer 5

$(document).on('click', function(e) { 
    if (e.target.className !='context-switch-menu') { 
     $(".context-switch-menu").hide(); 
    } 
}); 

Answer 6

他人が過去に提案した内容に基づいて、ここだけのアイデア、：

$(document).click(function(e){ 
    //this should give you the clicked element's id attribute 
    var elem = $(e.target).attr('classname'); 
    if(elem !== 'context-switch-menu'){ 
     $('.context-switch-menu').slideUp('slow'); 
     //or however you want to hide it 
    } 
});