介绍
在前端开发中，有时需要通过点击页面上的某个元素来显示或隐藏另一个元素。例如，单击菜单按钮以显示或隐藏导航栏。但是，在某些情况下，您希望用户单击页面上的任何其他区域时隐藏该元素。本文将介绍如何使用jQuery实现这一功能。
解决方案
我们可以使用jQuery的事件处理程序来检测用户是否单击应用程序中的任何其他部分，并在这种情况下隐藏目标元素。
以下是实现此目标的代码：
------------------------------- -
--- --------- - -------------------
-- ------------------------ -- ------------------------------ --- -- -
-----------------
-
---让我们看一下上面的代码做了什么：
$(document)绑定了一个mouseup事件处理程序。当用户松开鼠标按钮时，会触发此事件。- 然后，我们定义
container变量并将其设置为要隐藏的目标元素。 - 接下来，我们使用
!container.is(e.target)来检查用户是否单击了目标元素。如果是，则函数不执行任何操作。 - 如果单击了页面的其他部分（即单击目标元素之外的任何部分），则
container.has(e.target).length === 0条件将成立。这会隐藏目标元素。
示例代码
下面是一个完整的HTML页面示例，该页面具有一个按钮，单击它会显示或隐藏一个包含“Hello World”文本的div元素。但如果用户单击页面上其他任何地方，则div元素将隐藏。
--------- -----
------
------
------------- ---- ------- -- ----- -------- ---- ----- -- --- ---------------
------- -----------------------------------------------------------
------ ----------------
------- -
-------- -----
--------- ---------
---- ----
----- ----
---------- --------------- ------
-------- -----
----------------- --------
-
--------
-------
------
------- --------------------- ----------------
---- ------------
-------- ---------
------
------- -----------------------
------------------------------- -
--- --------- - -------------
-- ------------------------ -- ------------------------------ --- -- -
-----------------
-
---
-------------------------------- -
----------------------
---
---------
-------
-------结论
使用 jQuery 检测用户是否单击页面上的其他部分，可以轻松实现隐藏目标元素的效果。通过此方法，我们可以增强网站或应用程序的易用性和可访问性，并帮助用户更好地与内容进行交互。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28758