汉堡菜单打不开

Question

<a href="#"class="navbar-button" onclick="hideShow()">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
...
</nav>
<div class="little-menu">
<ul class="little-menu-list">
<li class="little-menu-list-general">General
<div class="little-menu-list-general-li">
<ol>
<li>Home</li>

<script>
function hideShow(){
const getElement = document.querySelector('.little-menu');
if(getElement.style.display=="none"){
getElement.style.display == "block";
}else{
getElement.style.display == "none";
}
}
</script>

这就是我制作汉堡包菜单的方法，但是它没有打开。

我想做一个正面对齐的汉堡包菜单。但是，当我点击按钮时，汉堡包没有出现在我的菜单屏幕上。

Answer 1

您遇到的问题是您正在使用双等号设置变量，但这是为了比较，所以您将只使用一个。

然而，我会习惯使用类而不是改变javascript中的CSS。从长远来看，使用类会给你带来更大的灵活性。

在我的代码片段中，我正在切换一个名为active的类，它将把显示设置为block。默认情况下，我给little-menu显示none

对于按钮，我会使用button元素而不是anchor。您仍然可以根据需要设置按钮元素的样式。你不需要阻止链接的默认行为。

const btn = document.querySelector(".navbar-button");
const getElement = document.querySelector('.little-menu');
btn.addEventListener("click",(e) => {
getElement.classList.toggle("active")
});

.little-menu{display:none;}
.little-menu.active{display:block;}

<button class="navbar-button">X</button>
<div class="little-menu">OPEN!</div>