JavaScript 解决方案：点击页面 body 区域关闭下拉菜单的实现

hwyzw

    本篇内容致力于呈现一种精简且高效的实现方法，用于达成点击网页主体部分时收起下拉列表的效果。借助对全局的监测，同时辨析事件发生的源头，能够便捷地管理下拉列表的呈现与隐藏状态，进而优化用户的使用感受。文章将深入阐释其运作机制，展示相关代码片段，并提示相关的注意事项。

    方案一：使用原生  实现

    这个计划的中心是监测点击动作，当动作发生时，要查看触发点的位置，看它是否位于下拉列表的范围内。假如动作来自下拉列表的外部区域，就需要取消施加在列表上的显示属性，以此实现列表的收起功能。

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'>    <pre class="brush:php;toolbar:false;">document设置事件处理器，监听点击行为，当用户进行鼠标点击操作时，会调用指定函数处理后续逻辑
那个名为dropdown的元素通过document.querySelector函数获取，其CSS类名为dropdown
菜单项通过文档查询器获取，类名为菜单
获取事件触发的对象，即被点中的那个元素

  // 检查点击事件是否发生在下拉菜单内部
当下拉列表不包含目标元素时，
若鼠标点击动作未作用在下拉列表范围之内，就撤销其显示状态的相关标记
当菜单具有显示类时，
菜单的显示类被移除,界面上的菜单不再呈现出来,用户无法看到菜单项,菜单的可见状态被取消,菜单的样式不再包含展示效果,菜单的属性发生了变化,菜单不再处于打开状态,菜单的可见性被关闭
    }
  }
});</pre></p>
    代码解释：

   

    这行代码为整个文档设置了一个响应点击的动作。用户若在文档任意处进行点击操作，就会启动这个函数。这两行代码分别找到了下拉菜单的外部框架和下拉菜单本身。该行代码识别了真正引发点击动作的那个组件。如果并非，那么就进行后续操作。这个判断过程，是看被点中的那个物件，是否属于某个下拉列表框的子项目。通过一个方法，可以判断一个物件是否涵盖了另一个物件。倘若点中的那个物件，并不处在下拉列表框的范围内，那么就运行大括号里面设定的指令。当菜单含有显示类时，执行移除该类操作，以此实现下拉菜单的隐藏功能。

    注意事项：

    方案二：使用  实现

    如果你的项目中已经引入了 ，可以使用  简化代码。

    法语写作助手

    法语助手推出的AI写作工具，能够自动检测并修正语法和拼写错误，同时提供一键式改写和润色功能，帮助优化你的法语文章。

    4568