使用Javascript创建一个下拉菜单

Question

我试图找出什么是一个很好的方法来完成一个下拉菜单，打开当用户点击一个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>

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

Answer 1

您至少需要在'none'比较中使用双等号。

Answer 2

您在代码中犯了一个错误，将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不应该用作处理点击的按钮。你可以用一个按钮标签来代替