Javascript 单击其他位置时隐藏打开的子菜单的逻辑？

假设用户访问一个电子商务站点并点击产品，就会有一个子菜单下拉。要编写什么逻辑来确保当用户单击任何其他空白空格或元素时，子菜单隐藏在后面？

胡乱猜测：除了子菜单之外，其他任何内容都可以听到，然后单击并关闭它

// assumption: submenu has open() and close() functions
submenu.open();
var listener = document.addEventListener('click', function(e){
    // TODO: how to check if click is on submenu?
    if (e.target != submenu) { 
       submenu.close(); 
       document.removeEventListener('click', listener);
    }
});

---

检查这把小提琴：-

以下是java脚本代码：-

$(document).mouseup(function (e)
{
    var container = $('.dropdown-menu');

    if (container.has(e.target).length === 0)
    {
        container.hide();
    }
});


$('.comment').click(function(){
    $('.dropdown-menu').css({'display': 'block'});
});

如果我们点击评论，我们可以得到下拉菜单，如果我们点击其他地方下拉菜单将被隐藏

---

希望这有帮助

我认为你的回答非常正确。如果你能解释一些查询，为什么要使用鼠标，而不是单击？如果container.hase.target.length==0，这一行是什么意思？@sahilsharma如果container.hase.target.length==0，无论我们是否点击目标，这一部分都将被删除如果length=0表示我们没有点击目标，这意味着我们必须隐藏它！这就是它的工作原理@sahilsharma我刚刚给了你逻辑，因为你也问了同样的问题！你可以改变鼠标点击它不会产生任何问题！