Question

我有一个简单的要求，我正在努力。

使用jquery，我想点击链接显示div然后可以点击任何地方但是现在显示的内容会再次隐藏它。

我已完成第一部分，我可以通过单击链接淡入/淡出div。但我不知道如何添加，而不是只点击淡出的链接，你可以点击任何地方，但蓝色内容区域淡出。

所以你通过点击链接淡入，但通过单击除了显示的内容之外的任何内容淡出。

$("#clickme").click(function() {
  $("#extra").fadeToggle();
});

我已经考虑过将html或文档定位为关闭，但由于#clickme在此范围内，因此无法正常工作。

Answer 1

$("#clickme").click(function () {
    $("#extra").fadeIn();
});
$(document).click(function (event) {
    if (event.target.id !== 'clickme') {
        $("#extra").fadeOut();
    }
})

单击链接时需要保留案例。小提琴编辑。

Answer 2

您可以使用以下逻辑来处理目标元素内的任何后代点击：

$("#clickme").click(function(e) {
    e.stopPropagation();
    $("#extra").fadeToggle();
});

$(document).click(function(e) {
    if (!$(e.target).closest('#extra').length) {
        $('#extra').fadeOut();
    }
});

jQuery - fadeOut div点击任何地方但指定选择器？

2 个答案:

-DEMO-