Dropdown menu visible | Dropdown menu not visible。我做了一个简单的下拉菜单，我想知道如果单击箭头，如何隐藏和显示它。我想，也许如果您将下拉菜单设置为不显示任何内容，并且当您单击箭头（图标来自字体真棒）时，它将更改为显示块，从而显示其自身。当您再次单击它时，它会再次隐藏。我用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）根据元素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>