javascript - 使用 javascript、HTML 和 CSS 的下拉菜单

Question

我似乎无法让它工作。我还不想放入 jQuery。只是做普通的javascript。当我点击图像时没有任何反应。单击图像时，我需要它来下拉导航。编辑了我的 Javascript 代码。我添加了警报以显示切换正在使用的类的当前状态。但我仍然无法将它从 header_navigation_mobile 更改为 header_navigation_mobile.is_open

这是我的可点击图像的 HTML 代码

<a href="#" onclick="toggleMenu()">
    <img class="mobile_navigation_button" src="{{site.baseurl}}/assets/img/menu.svg"/>
</a>

这是下拉导航的 HTML

<div class="header_navigation_mobile">
   <ul>
        <li><a href="{{site.baseurl}}/index.html">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#"> </a></li>
        <li><a href="#"> </a></li>
   </ul>
</div>

然后我的 CSS 用于显示导航的可点击图像

.header_navigation_mobile.is_open{
    display: block;
    transform: translateY(0%);
}   

这是可点击图像第一个状态的 CSS，即隐藏它

.header_navigation_mobile{
    display: none;
    position: absolute;
    width: 290px;
    background: #484547;
    transform: translateY(-100%);
    transition: all 0.3s ease-in-out;
}

最后是我的 Javascript

function toggleMenu(){
var mobileNav = document.getElementById('mobile_Nav');
var mobileNav_toggle = mobileNav.getAttribute("class");

if(mobileNav_toggle == "header_navigation_mobile") {
    mobileNav_toggle == "header_navigation_mobile.is_open";
}
else {
    mobileNav_toggle == "header_navigation_mobile";
}

alert(mobileNav_toggle);
}

Answer 1

我会给菜单一个 ID，这样它更容易定位，然后只需切换用于隐藏/显示菜单的类。

.header_navigation_mobile {
  display: none;
}
.open {
  display: block;
}

<a href="#" onclick="toggleMenu()">toggle</a>

<div class="header_navigation_mobile" id="mobilenav">
  <ul>
    <li><a href="{{site.baseurl}}/index.html">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
    <li>
      <a href="#"> </a>
    </li>
    <li>
      <a href="#"> </a>
    </li>
  </ul>
</div>

<script>
  function toggleMenu(){
    var nav = document.getElementById('mobilenav');
    nav.classList.toggle('open');
  }
</script>