时间戳

首页 > 解决方案 > 使用 vanilla Javascript 制作下拉菜单

javascript - 使用 vanilla Javascript 制作下拉菜单

问题描述

我试图弄清楚什么是完成下拉菜单的好方法，该下拉菜单在用户单击div用作按钮时打开并在用户再次单击时隐藏。我的 CSS 表中的样式设置为display: none. 这就是我所经历的：

var xx = document.getElementById('dropdown-Container');

if (xx.display.style = 'none') {
  xx.addEventListener('click', function showMenu() {
    document.getElementById('dropdown-Container').style.display = 'block';
  } else {
    xx.style.display = 'none';
  }, false);
}
<div type="button" id="dropdown-Container">
  <a class="dropdown1" href="#">Link 1</a>
  <a class="dropdown1" href="#">Link 2</a>
  <a class="dropdown1" href="#">Link 3</a>
</div>
<a href="#contact">Search</a>
</div>

菜单已正确隐藏，但是当用户单击它时，它并没有像我希望的那样打开。

标签： javascripthtmlcss

解决方案

通过将 if 语句放在事件侦听器上方，您在代码中犯了一个错误。像这样使用它。

var menu = document.getElementById('yourDropdownMenuIdHere');
var dropdown = document.getElementById('dropdown-Container');

menu.addEventListener('click', function showMenu(){
    if( dropdown.style.display = 'none' ) {
       dropdown.style.display = 'block';
    } else {
        dropdown.style.display = 'none';
    }
});

可访问性问题：不应将 div 用作处理点击的按钮。您可以改用按钮​​标签

推荐阅读