jquery - 组合两个函数来隐藏元素

Question

我有以下三个功能:

$(".redDiv").hover(function() {
   $(".blueDiv").show();
}, function() {
    $(".blueDiv").hide();
});
$(".blueDiv").hover(function() {
    $(this).show();
}, function() {
    $(this).hide();
});

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

非常简单，当鼠标悬停在 .redDiv 或 .blueDiv 上时，就会显示它。此外，如果用户单击文档中的任意位置，则所有 div 都将被隐藏。如果被单击的元素中有 .ignoreClick 类，则此单击的唯一异常(exception)。

我需要它在点击时隐藏blueDiv，即使鼠标位于它上面。由于某种原因，这不起作用。我缺少什么？

Answer 1

您可以在 .ignoreClick 元素的事件处理程序中使用 event.stopPropagation 来停止隐藏文档点击时的所有 div(该事件不会冒泡到文档元素)。

此外，如果您淡出 div 元素而不是显示/隐藏它们，它们仍将占据文档中的位置。如果您使用 show/hide 那么该元素将不再位于页面流中，并且您将无法将鼠标悬停在任何隐藏元素上以使其隐藏再次显示。如果您更改 div 的不透明度，那么您可以将鼠标悬停在隐藏的 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