jQuery

Question

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

使用 jquery，我想点击一个 link 来显示一个 div 然后可以点击任何地方但现在显示的内容再次隐藏它。

我已经完成了第一部分，我可以通过单击 link fadeIn/Out div。但我不确定如何添加它而不是仅单击 link 淡出，而是您可以单击蓝色内容区域以外的任何地方淡出。

因此，您通过单击 link 淡入，但通过单击显示内容之外的任何内容淡出。

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

点击link后需要离开案例。 Fiddle 已编辑。

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 单击指定选择器以外的任何地方？

jQuery - fadeOut div on click anywhere but specified selector?

fadeout

-DEMO-