Question

我希望创建通知看起来像FaceBook，看看this image，我创建了，在我的代码中，我使用事件onClick为icon notify然后addClass('open')为...当<ul class="notify-content dropdown-menu open">打开时，我想点击此窗口中的任意位置（注意：不同的选择器）removeClass('open')。怎么做？

这是我的代码：

$('#layout-topbar-right .notify-warring').on('click', function() {
    var dom = $('layout-topbar-right .dropdown-menu');
    if ($(dom).hasClass('open')) {
        $(dom).removeClass('open');
    } else {
        $(dom).addClass('open');
    }
});

Answer 1

您可以尝试：

$( document.body ).click(function() {
  // your codes
});

或者
document.body.addEventListener（＆＃39; click＆＃39;，fn，true）;

Answer 2

你可以试试这个：

$(document).click(function(e) {
    if (!$(e.target).parents('#layout-topbar-right').length) {
        $(dom).removeClass('open')
    }
});

当用户点击文档时，我们会使用e.target检查他点击的元素。

如果点击的元素超出了父#layout-topbar-right：

if (!$(e.target).parents('#layout-topbar-right').length)

隐藏dom

这里是完整的代码

var dom;
$('#layout-topbar-right .notify-warring').on('click', function() {
    dom = $('layout-topbar-right .dropdown-menu');
    if ($(dom).hasClass('open')) {
        $(dom).removeClass('open');
    } else {
        $(dom).addClass('open');
    }
});

$(document).click(function(e) {
  if (!$(e.target).parents('#layout-topbar-right').length) {
      $(dom).removeClass('open')
  }
});

如何通过单击任何不同的选择器显示隐藏选择器

2 个答案: