如何实现点击非目标选择器时隐藏内容并关闭仿Facebook通知组件

嘿，我来帮你搞定这两个需求！咱们一步步来实现：

需求1：点击非目标选择器时隐藏当前显示的选择器 #

核心思路是监听整个文档的点击事件，判断点击的区域是否属于目标选择器（或它的子元素），如果不属于就隐藏目标元素。同时要注意阻止目标元素内部的点击事件冒泡，不然点击目标本身也会触发隐藏逻辑。

假设你的目标选择器是 .target-selector，实现代码如下：

// 监听文档点击
$(document).on('click', function(e) {
  const targetSelector = '.target-selector';
  // 判断点击的元素不是目标选择器，也不是它的后代
  if (!$(e.target).closest(targetSelector).length) {
    $(targetSelector).hide(); // 或者用你需要的隐藏方式，比如移除类
  }
});

// 阻止目标选择器内部的点击事件冒泡，避免误触发隐藏
$(document).on('click', '.target-selector', function(e) {
  e.stopPropagation();
});

需求2：通知组件点击外部区域关闭下拉菜单 #

先修正你现有代码里的小问题：$('layout-topbar-right .dropdown-menu') 缺少了ID选择器的 #，应该写成 $('#layout-topbar-right .dropdown-menu')。接下来我们基于你的现有逻辑，添加外部点击关闭的功能：

// 点击通知图标切换下拉菜单的open类
$('#layout-topbar-right .notify-warring').on('click', function(e) {
  // 阻止事件冒泡，避免触发document的click事件立刻关闭菜单
  e.stopPropagation();
  
  const $dropdown = $('#layout-topbar-right .dropdown-menu');
  $dropdown.toggleClass('open');
});

// 点击下拉菜单内部时，阻止事件冒泡，避免误关闭
$(document).on('click', '#layout-topbar-right .dropdown-menu', function(e) {
  e.stopPropagation();
});

// 监听文档点击，关闭下拉菜单（如果点击的不是目标区域）
$(document).on('click', function() {
  $('#layout-topbar-right .dropdown-menu.open').removeClass('open');
});

逻辑说明： #

1. 点击通知图标时，切换open类，同时阻止事件冒泡，这样文档的点击事件不会被触发，菜单能正常展开/收起。
2. 点击下拉菜单内部时，同样阻止冒泡，保证在菜单内操作时不会意外关闭。
3. 点击文档其他区域时，直接移除下拉菜单的open类，实现关闭效果。

如果你的下拉菜单有动画或者其他复杂逻辑，可以在移除open类前做一些判断（比如判断菜单是否处于展开状态），不过上面的代码已经能满足基础需求啦！

内容的提问来源于stack exchange，提问作者Trương Huy