如何使用JavaScript点击关闭下拉菜单?

阅读时长 4 分钟读完

下拉菜单是网站用户界面中常见的一个元素。为了使用户体验更好,我们通常希望他们能够通过点击菜单以外的区域来关闭下拉菜单。

本文将介绍如何使用JavaScript编写代码,实现点击下拉菜单以外的区域时自动关闭下拉菜单。

HTML/CSS 部分

首先,我们需要创建一个下拉菜单。我们可以使用HTML和CSS来构建它。以下是一个简单的示例:

在这个示例中,我们使用一个 div 元素来包含整个下拉菜单。该 div 包括两个子元素:一个按钮和一个下拉内容区域。按钮用于触发下拉内容,而下拉内容则包含一些链接。

接下来,我们需要使用CSS样式来控制下拉菜单的显示和隐藏。以下是一个简单的CSS样式示例:

-- -------------------- ---- -------
-- ------ --
-------- -
  ----------------- --------
  ------ ------
  -------- -----
  ---------- -----
  ------- -----
  ------- --------
-

-- ------ --
----------------- -
  -------- -----
  --------- ---------
  ----------------- --------
  ---------- ------
  -------- --
-

-- ---------------- --
--------------- ----------------- -
  -------- ------
-

在这个示例中,我们使用 display 属性将下拉内容的可见性设置为隐藏。当鼠标悬停在下拉按钮上时,我们将它的对应下拉内容区域的 display 属性设置为 block,使其显示出来。

JavaScript 部分

现在,我们需要添加JavaScript代码以实现点击下拉菜单以外的区域时自动关闭下拉菜单。

首先,我们需要为整个页面添加一个事件监听器,以便在单击页面上任何位置时都可以检查是否应该关闭下拉菜单。以下是我们将要添加的代码:

-- -------------------- ---- -------
-- ---------------
---------------------------------- --------------- -

  -- -----------------
  --- --------- - ----------------------------------------------------
  --- ---- - - -- - - ----------------- ---- -
    --- ------------ - -------------
    -- ----------------------------------------- -
      -- ---------------------------------------------------- -
        --------------------------------------
      -
    -
  -
---

在这个代码中,我们使用 addEventListener 方法为整个文档添加了一个单击事件监听器。当用户单击页面上的任何位置时,此事件将触发。

接下来,我们使用 getElementsByClassName 方法查找所有包含下拉内容区域的元素,并使用一个循环遍历它们。对于每个下拉内容区域,我们检查其是否当前处于打开状态,并检查单击事件是否不在该区域内部。如果是这样,我们就将该下拉内容区域的 show 类删除,使其隐藏。

最后,我们需要添加一些代码来处理单击下拉按钮的情况。当用户单击下拉按钮时,我们将切换其相应的下拉内容区域的 show 类。以下是我们将要添加的代码:

纠错
反馈