如何使用js单击按钮来显示下拉菜单？答案

【问题标题】：how to reveal dropdown menu with button click using js?如何使用js单击按钮来显示下拉菜单？
【发布时间】：2020-05-20 09:38:31
【问题描述】：

Dropdown menu visible | Dropdown menu not visible。我制作了一个简单的下拉菜单，我想知道如果单击箭头，如何隐藏和显示它。我想也许如果您将下拉菜单设置为不显示，并且当您单击箭头（图标来自字体 awsome）时，它会更改为显示块，因此它会显示自己。当您再次单击它时，它会再次隐藏起来。我用 JS 尝试了一些东西，但没有成功。

这是我的html：

    <div class="container">
        <div class="row categoriën-onder">
            <div class="col-3 categoriën">
                <ul>
                    <li>
                        <a class="categoriën-link "href="#"> 
                            categoriën
                            <i id="dropdown-icon" class="fas fa-chevron-down"></i>
                        </a>
                        <ul class="dropdown">
                            <li> <a href="wandlampen.html"> Wandlampen</a> </li>
                            <li> <a href="hanglampen.html"> Hanglampen</a> </li>
                            <li> <a href="tafellampen.html"> Tafellampen</a> </li>
                            <li> <a href="vloerlampen.html"> Vloerlampen</a> </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

【问题讨论】：

请分享您尝试过的 JS 代码。你想出了一个很好的解决方案。而且，通过了解您的尝试出了什么问题，这将是一种更好的学习体验。

标签： javascript html css drop-down-menu dropdown

【解决方案1】：

您对如何执行此操作的描述很准确。

1) 在下拉图标中添加一个事件监听器来监听点击。

2) 监听器应该调用一个函数，使用 JS 来获取菜单。

3) 根据元素style.display切换可见性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

</head>
<body>
  <div class="container">
    <div class="row categoriën-onder">
        <div class="col-3 categoriën">
            <ul>
                <li>
                    <a class="categoriën-link "href="#">
                        categoriën
                        <i id="dropdown-icon" class="fas fa-chevron-down"></i>
                    </a>
                    <ul class="dropdown">
                        <li> <a href="wandlampen.html"> Wandlampen</a> </li>
                        <li> <a href="hanglampen.html"> Hanglampen</a> </li>
                        <li> <a href="tafellampen.html"> Tafellampen</a> </li>
                        <li> <a href="vloerlampen.html"> Vloerlampen</a> </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
  </div>

  <script>
      function toggleDropdown() {
        const menu = document.querySelector(".dropdown");
        if (menu.style.display === "none") {
          menu.style.display = "block";
        } else {
          menu.style.display = "none";
        }

      }
      document.getElementById("dropdown-icon").addEventListener("click", toggleDropdown);
  </script>
</body>
</html>

【讨论】：

非常感谢！有没有一种简单的方法可以在单击时将图标旋转 180 度？

【解决方案2】：

利用类来显示下拉菜单，以便您可以控制 CSS 中的每个元素，包括图标旋转。

我还稍微修改了 HTML 以支持多个下拉项。

小提琴：https://jsfiddle.net/kb0te5u4/

document.querySelectorAll(".dropdown-icon").forEach(function(dropdown) {
  dropdown.addEventListener("click", function(e) {
    e.target.closest('li').classList.toggle('toggle');
  });
});

ul li.toggle .dropdown {
  display: none;
}

ul li.toggle .dropdown-icon {
  transform: rotate(180deg)
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="row categoriën-onder">
    <div class="col-3 categoriën">
      <ul>
        <li>
          <a class="categoriën-link " href="#">
            categoriën
            <i class="dropdown-icon fas fa-chevron-down"></i>
          </a>
          <ul class="dropdown">
            <li> <a href="wandlampen.html"> Wandlampen</a> </li>
            <li> <a href="hanglampen.html"> Hanglampen</a> </li>
            <li> <a href="tafellampen.html"> Tafellampen</a> </li>
            <li> <a href="vloerlampen.html"> Vloerlampen</a> </li>
          </ul>
        </li>

        <li>
          <a class="categoriën-link " href="#">
            categoriën 1
            <i class="dropdown-icon fas fa-chevron-down"></i>
          </a>
          <ul class="dropdown">
            <li> <a href="wandlampen.html"> Wandlampen</a> </li>
            <li> <a href="hanglampen.html"> Hanglampen</a> </li>
            <li> <a href="tafellampen.html"> Tafellampen</a> </li>
            <li> <a href="vloerlampen.html"> Vloerlampen</a> </li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
</div>

【讨论】：