要素の外側をクリックしたときに要素を非表示にする

Question

DIV内にラジオボタンのリストがあります。このDIVは、spanをクリックするとスライドします。

ここで、ラジオボタンの1つを選択すると、スパン内のテキストが置き換えられ、DIVが元に戻ります。

また、ラジオボタンのリストでDIVを作成する必要があります。これは、ユーザーがページのどこか他の場所をクリックするたびにスライドバックされます。

は、ここに私のjQueryの：

$('input[type=radio]').click(function() {  
    $('.selected-search-wjs').text($(this).parent().text());//This replaces the text/selection 
    $('.radio-btns-wrapper-wjs').slideUp('fast');//This makes the DIV slide back up after a selection has been made 
}); 

任意のアイデアどのように？

ありがとうございます。

PS。 HTMLが必要な場合は教えてください。これはHTMLがどのように組み合わされているかにかかわらず、これが動作の特徴であるため、私は必要とは思わないので、ここには載せませんでした。ありがとう。

Answer 1

ここでは、このためのソリューションです。コンテナDIVが持っていたので、私は .mouseout を使用していましたが、それはうまくいきませんでした、今

$('.radio-btns-wrapper-wjs').mouseleave(function() { 
    $(this).slideUp(); 
}); 

：

私が行うために必要なすべてのは.mouseleave方法を使用して別の関数を作成することでした子要素があるので、それらの上にマウスを置くと、DIVが後退します。

だから私は、なぜ、どのようにそれを解決するためにについては、この簡単な説明が見つかりました：

http://jquery-howto.blogspot.com/2009/04/problems-with-jquery-mouseover-mouseout.html

感謝を。 EDIT--

が、私はこのケースで他の問題に遭遇し、ここで問題と解決策を参照してください。Hide element if displayed (a little complex case)

Answer 2

はjQueryのを試してみてくださいませんselecterを、

 
$('body:not(.radio-btns-wrapper-wjs, input[type=radio])').click(function() { 
    $('.radio-btns-wrapper-wjs').slideUp('fast'); 
}); 

Answer 3

のように、これを試してみてください：

は

var wrapper = $('.radio-btns-wrapper-wjs'); // cache the wrapper element for speed 
$(document).click(function(e) { // when any click is received 
    if (
     (wrapper[0] != e.target) && // the target element is not the wrapper 
     (!wrapper.has(e.target).length) // and the wrapper does not contain the target element 
    ) { 
     wrapper.slideUp('fast'); 
    } 
});