外部点击 div 隐藏 jqeury 中的 div - Javascript

在某些情况下，我们需要在点击页面上的某个元素时隐藏 jqeury 中的 div。本文将介绍如何使用 Javascript 实现此功能。

代码实现

首先，我们需要设置一个监听器来检测鼠标点击事件，如果点击了页面上的任何位置，就隐藏目标 div。

$(document).on('click', function(e) {
  if (!$(e.target).closest('.target-div').length) {
    $('.target-div').hide();
  }
});

在上面的代码中，我们使用了 jQuery 的 closest() 方法来检查事件的目标元素是否包含在目标 div 中，如果没有，则调用 jQuery 的 hide() 方法隐藏该目标 div。

解释说明

• $(document).on('click', function(e) {...});：添加一个点击事件监听器。
• if (!$(e.target).closest('.target-div').length) {...}：检查事件的目标元素是否包含在目标 div 中。
• $('.target-div').hide();：如果目标元素不包含在目标 div 中，则隐藏目标 div。

结论

使用上述代码，我们可以轻松地在点击页面上的任何位置时隐藏 jqeury 中的 div。此方法对于网页设计和开发人员来说是一个非常有用的技巧。