JavaScript下拉菜单切换按钮失效问题求助及修复指导

你的下拉菜单功能失效主要有三个问题，逐一修复即可：

1. HTML语法错误 #

代码里的Mojito链接标签引号未闭合，导致DOM解析异常：

<!-- 错误写法 -->
<a href="#>Mojito</a>
<!-- 修复后 -->
<a href="#">Mojito</a>

2. 缺少必要的CSS样式 #

下拉菜单默认需要隐藏，同时要定义.show类来控制显示，你的recipe.css里没加这些样式，JavaScript的classList.toggle("show")就起不到作用。添加以下CSS：

/* 默认隐藏下拉容器 */
.search-container {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 显示下拉容器的类 */
.search-container.show {
  display: block;
}

/* 可选：美化链接样式 */
.search-container a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.search-container a:hover {
  background-color: #f1f1f1;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.container {
  position: relative;
  display: inline-block;
}

3. 脚本加载时机问题 #

你把脚本放在<head>里，此时DOM还没加载完成，myFunction里的document.getElementById("myDropdown")可能找不到元素。推荐用DOM加载监听优化代码：

document.addEventListener('DOMContentLoaded', function() {
  // 点击按钮切换下拉显示
  document.querySelector('.dropbtn').addEventListener('click', function() {
    document.getElementById("myDropdown").classList.toggle("show");
  });

  // 过滤功能
  document.getElementById("myInput").addEventListener('keyup', function() {
    var input = this;
    var filter = input.value.toUpperCase();
    var dropDown = document.getElementById("myDropdown");
    var links = dropDown.getElementsByTagName("a");
    
    for (let i = 0; i < links.length; i++) {
      const textValue = links[i].textContent || links[i].innerText;
      if (textValue.toUpperCase().indexOf(filter) > -1) {
        links[i].style.display = "";
      } else {
        links[i].style.display = "none";
      }
    }
  });

  // 点击页面其他地方关闭下拉菜单（可选优化）
  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
      var dropdowns = document.getElementsByClassName("search-container");
      for (let i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }
});

修复后的完整HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1">
    <title>Cocktail App</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/recipe.css">
</head>
<body>
    <h2>YOUR ONE STOP SHOP FOR AMAZING COCKTAIL RECIPES!</h2>
    <div class="container">
        <button class="dropbtn"> Cocktails!!</button>
        <div id="myDropdown" class="search-container">
            <input type="text" placeholder="Choose cocktail..." id="myInput">
            <a href="#">Margarita</a>
            <a href="#">Mojito</a>
            <a href="#">Long Island tea</a>
            <a href="#">Whiskey Sour</a>
        </div>
    </div>
    <div id="result"></div>
    <script src="recipe.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Tara