如何让您自己的下拉菜单做出原生反应 - Javascript

下拉菜单（Dropdown menu）是网页开发中非常常见的组件之一，它能够展示多个选项并在用户选择后执行相应的操作，是提供交互性的重要工具之一。本篇介绍如何使用 Javascript 实现下拉菜单的原生反应。

HTML模板

首先，我们需要写一个 HTML 模板来定义下拉菜单。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">选项1</a>
    <a class="dropdown-item" href="#">选项2</a>
    <a class="dropdown-item" href="#">选项3</a>
  </div>
</div>

这个模板使用了 Bootstrap 框架中的下拉菜单组件。可以看到，下拉菜单是由一个按钮和一个包含选项的下拉列表组成。当用户点击按钮时，下拉列表会出现，并且用户可以选择其中的选项。

Javascript 实现

我们需要使用 Javascript 实现下拉菜单的原生反应。以下是实现步骤：

步骤1：获取 HTML 元素

首先，我们需要获取 HTML 中的按钮和下拉列表元素，并分别存储在变量中。这可以通过使用 document.querySelector() 方法来实现，如下所示：

const dropdownBtn = document.querySelector(".dropdown-toggle");
const dropdownMenu = document.querySelector(".dropdown-menu");

步骤2：添加事件监听器

接下来，我们需要添加事件监听器，监听用户行为。当用户点击按钮时，事件监听器将判断下拉列表的状态并根据需要隐藏或显示下拉列表，代码如下所示：

dropdownBtn.addEventListener("click", function() {
  if (dropdownMenu.style.display === "block") {
    dropdownMenu.style.display = "none";
  } else {
    dropdownMenu.style.display = "block";
  }
});

在这个代码中，我们使用了 addEventListener() 方法来为按钮添加点击事件监听器。事件监听器上的匿名函数会在用户点击按钮时执行。使用 if 语句来判断下拉列表当前的状态。如果下拉列表已经显示，则隐藏它。如果下拉列表尚未显示，则将其显示。

步骤3：点击其他地方隐藏下拉列表

最后，我们需要添加另一个事件监听器，以便当用户点击页面的其他区域时隐藏下拉列表。代码如下所示：

document.addEventListener("click", function(e) {
  if (!dropdownBtn.contains(e.target)) {
    dropdownMenu.style.display = "none";
  }
});

在这个代码中，我们使用了 addEventListener() 方法来为 document 添加点击事件监听器。事件监听器上的匿名函数会在用户点击任何地方时执行。使用 if 语句检查用户点击的元素是否是按钮。如果不是按钮，则隐藏下拉列表。

总结

这就是如何使用 Javascript 实现下拉菜单的原生反应。我们需要获取 HTML 元素、添加事件监听器，并根据需要隐藏或显示下拉列表。使用这个模板，您可以制作交互性更强的下拉菜单并提供更好的用户体验。