jQuery：点击除了元素以外的任何地方隐藏元素-JavaScript中文网-JavaScript教程资源分享门户

介绍

在前端开发中，有时需要通过点击页面上的某个元素来显示或隐藏另一个元素。例如，单击菜单按钮以显示或隐藏导航栏。但是，在某些情况下，您希望用户单击页面上的任何其他区域时隐藏该元素。本文将介绍如何使用jQuery实现这一功能。

解决方案

我们可以使用jQuery的事件处理程序来检测用户是否单击应用程序中的任何其他部分，并在这种情况下隐藏目标元素。

以下是实现此目标的代码：

$(document).mouseup(function(e) {
    var container = $("#your-element");

    if (!container.is(e.target) && container.has(e.target).length === 0) {
        container.hide();
    }
});

让我们看一下上面的代码做了什么：

$(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