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类，则此单击的唯一例外。

即使鼠标悬停在上面，我也需要它来隐藏blueDiv。由于某种原因，这是行不通的。我错过了什么？

Answer 1

你可以这样做：

$(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();
});

Answer 2

您可以在event.stopPropagation元素的事件处理程序中使用.ignoreClick来停止隐藏文档点击时的所有div（事件不会冒泡到document元素）。< / p>

此外，如果你淡出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

结合两个函数来隐藏元素

2 个答案: