Javascript 如何使用js通过按钮点击显示下拉菜单？_Javascript_Html_Css_Drop Down Menu_Dropdown

Javascript 如何使用js通过按钮点击显示下拉菜单？

javascript html css drop-down-menu

Javascript 如何使用js通过按钮点击显示下拉菜单？,javascript,html,css,drop-down-menu,dropdown,Javascript,Html,Css,Drop Down Menu,Dropdown,|。我做了一个简单的下拉菜单，我想知道如果你点击箭头，你怎么能隐藏和显示它。我想，如果你把下拉菜单设置为“不显示”，当你点击箭头（图标来自字体awsome）时，它会变成“显示块”，这样它就会显示出来。当你再次点击它时，它会再次隐藏自己。我用JS做了一些尝试，但没有成功这是我的html： <div class="container"> <div class="row categoriën-onder"> <div cl

|。我做了一个简单的下拉菜单，我想知道如果你点击箭头，你怎么能隐藏和显示它。我想，如果你把下拉菜单设置为“不显示”，当你点击箭头（图标来自字体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>

您对如何执行此操作的描述非常准确

1）将事件侦听器添加到侦听单击的下拉图标

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

3）根据元素

样式切换可见性。显示
<!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>


文件










函数toggleDropdown（）{
const menu=document.querySelector（“.dropdown”）；
如果（menu.style.display==“无”）{
menu.style.display=“block”；
}否则{
menu.style.display=“无”；
}
}
document.getElementById（“下拉图标”）.addEventListener（“单击”，切换下拉菜单）；
利用类显示下拉列表，以便您可以拥有CSS中每个元素的控件，包括图标旋转
我还稍微修改了HTML以支持多个下拉项
小提琴：

document.queryselectoral（“.dropdown icon”）.forEach（函数（下拉菜单）{
addEventListener（“单击”，函数（e）{
e、 target.closest（'li'）.classList.toggle（'toggle'）；
});
});
ul li.toggle.下拉列表{
显示：无；
}
ul li.toggle.下拉图标{
变换：旋转（180度）
}



















请分享您尝试的JS代码。你已经想出了一个好办法。而且，如果知道你的尝试有什么问题，这将是一次更好的学习体验。非常感谢！当你点击图标时，有没有一个简单的方法来增加180度的旋转？