は、私は、次の3つの機能を持っている要素

Question

を非表示にするには二つの機能を組み合わせます。また、ユーザーがドキュメントの任意の場所をクリックすると、すべてのdivが非表示になっています。クリックされた要素に.ignoreClickクラスがある場合、このクリックの唯一の例外です。

マウスが上にあっても、クリックするとblueDivを非表示にする必要があります。何らかの理由でそれが動作しません。私は何が欠けていますか？

Answer 1

（イベント意志document要素にアップしていないバブル）。

また、div要素をshow/hideでなくフェードアウトしても、それらの要素はドキュメント上に残っています。 show/hideを使用すると、その要素はページのフローにはなくなり、非表示の要素にマウスを重ねると再び表示されなくなります。あなたは、代わりにdiv要素のopacityを変更する場合は、マウスオーバー隠されたdiv要素をすることができますし、それが表示されます：ここでは

var $redDivs = $('.redDiv'), 
    $blueDivs = $('.blueDiv'), 
    $ignore = $('.ignoreClick'); 
$redDivs.hover(
     function() {   
     $blueDivs.stop().fadeTo(100, 1); 
    }, 
     function() { 
     $blueDivs.stop().fadeTo(100, 0); 
     }      
);  
$blueDivs.hover(
     function() { 
     $(this).stop().fadeTo(100, 1); 
     }, 
     function() { 
     $(this).stop().fadeTo(100, 0); 
     }      
); 

$ignore.bind('click', function (event) { 
    event.stopPropagation(); 
}); 

$(document).click(function(e) { 
    $redDivs.add($blueDivs).add($ignore).stop().fadeTo(100, 0); 
}); 

はデモです：私はすべてのセレクタをキャッシュされたhttp://jsfiddle.net/E5f6N/2/

お知らせ、この意志コードをより効率的に実行するのに役立ちます。 .fadeTo()ため

ドキュメント：http://api.jquery.com/fadeto

Answer 2

あなたがこれを行うことができます：あなたは、文書のクリックですべてのdivを隠し停止する.ignoreClick要素のイベントハンドラでevent.stopPropagationを使用することができます

$(document).click(function(e) { 

    $('body').addClass('allHidden'); 

    if (!$(".ignoreClick").is(e.target)) { 
     $("div").hide(); 
    } 
}); 
$(".blueDiv").hover(function() { 

    if(!$('body').hasClass('allHidden')){ 
     $(this).show(); 
    }); 

}, function() { 
    $(this).hide(); 
});