显示菜单并在点击其他地方时隐藏它？

Question

我有这种情况，我有body标签，并没有直观地包装所有内容

我有3个TR's，其中包含2个TD's - 一个用于信息字，另一个用于黄色div。

点击每个Info TD - 会打开div（自己的位置 - 绝对位置）。

• 当我点击Info黄色窗口切换时。

我遇到的问题：关闭黄色div。

我希望只有当我点击黄色div外的相关Info TD或

时才关闭它

如您所见，点击Info TD已经关闭了div。

但是我对黄色div的outisde区域有问题。

这就是我所做的：

$("body").on('click', ".tdInfo", function (e) //when clicking on tdInfo
{
    var $cached = $(this).closest('tr').find('.myDiv'); //cache the suppose to be open div
    var wasOpen = $cached.is(":visible");
    $(".myDiv:visible").hide(); //hide all previous visible
    if (wasOpen) $cached.slideUp();
    else
   $cached.slideDown(function ()  //when the yellow div open - register once to close only when :not(.myDiv) are clicked
    {
        $("body").one('click', ':not(.myDiv)', function (e2)
        {
            e2.stopImmediatePropagation(); // Parent - ignore me.
            $cached.slideUp();
            return false;
        });
    });
});

问题

上面的代码没有按预期工作。当我点击黄色div - 它关闭。我不希望它被关闭。

黄色div应该关闭的唯一情况是：点击黄色div之外的TD Info 或。

Full working Jsbin

nb请不要尝试更改高度或插入其他元素。这是我当前页面的精确简化。此外 - 我可以找到一个更多JQ的解决方案，但我认为它应该更简单。

Answer 1

我会这样做

$(document).on('click', function(e) {
    if ( $(e.target).closest('.td').length > 0 ) return;

    var $cached = $(e.target).closest('tr').find('.myDiv');
    var wasOpen = $cached.is(":visible");

    $(".myDiv:visible").hide();

    if ($cached.length && (!wasOpen)) {
        $cached.slideDown();
    }
});

body元素是具有给定高度和宽度的元素，如OP的示例所示，并且在外部点击黄色元素和外部body您没有点击任何内容，但所有点击都会传播到document级别，因此您必须收听document，而不是body。

FIDDLE

Answer 2

检测黄色框元素中的click事件并防止默认：

 $('.YELLOW_DIV').click(function (e) {

    //event handled
    e.preventDefault();

   });