移动端Hamburger图标无法打开导航栏问题求助

我正在开发一个简单的WordPress主题，当浏览器缩小到移动端尺寸时，汉堡图标能正常显示，但点击后导航栏无法展开。尝试了一些代码仍未解决问题，希望得到帮助。无法提供在线演示。

现有代码 #

HTML #

<header>
 <nav class="navigation" id="myTopnav">
    <div class="logo">
      <img src="https://appd4b.com/wp-content/uploads/2024/04/WEBD4B-removebg-preview.png" alt="Site Logo" width="15%" height="15%">
    </div>
    
    <ul class="menu-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#portfolio">Project</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <a href="javascript:void(0);" class="humbarger icon" onclick="toggleMenu()">
      <i class="fa fa-bars"></i>
    </a>
  </nav>
</header>

JavaScript #

function toggleMenu() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navigation") {
    x.className += " responsive";
  } else {
    x.className = "navigation";
  }
}

CSS #

.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f8f8f8; /* Adjust as needed */
}

.logo {
  flex: 1;
}

.logo img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.menu-list {
  flex: 1;
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.menu-list li {
  margin: 0 10px;
}

.menu-list li a {
  text-decoration: none;
  color: #333; /* Adjust as needed */
}

.humbarger {
  display: none; /* Hide by default */
}

@media screen and (max-width: 768px) {
  .menu-list {
    display: none; /* Hide menu on smaller screens */
  }

  .humbarger {
    display: block; /* Show hamburger menu on smaller screens */
    cursor: pointer;
  }

  .bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
  }

  .bar2 {
    width: 20px; /* Adjust to create hamburger effect */
  }
}
@media screen and (max-width: 600px) {
  .navigation .menu-list {
    display: none;
  }

  .navigation.responsive .menu-list {
    display: block;
  }
}

问题分析与修复方案 #

1. 响应式CSS规则覆盖问题 #

现有CSS中，.navigation.responsive .menu-list仅在max-width:600px的媒体查询内生效，但汉堡菜单在max-width:768px时就已显示，导致768px-600px区间点击汉堡后菜单仍不显示。同时重复的媒体查询容易引发规则冲突。

修复：
合并媒体查询，确保所有移动端尺寸下展开规则生效：

@media screen and (max-width: 768px) {
  .navigation {
    flex-wrap: wrap;
    position: relative; /* 为绝对定位的菜单提供参考 */
  }

  .menu-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #f8f8f8;
    padding: 20px;
    flex-direction: column;
    gap: 15px;
    margin: 0;
  }

  .humbarger {
    display: block;
    cursor: pointer;
  }

  .bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
  }

  .bar2 {
    width: 20px;
  }

  /* 确保展开状态下菜单显示 */
  .navigation.responsive .menu-list {
    display: flex;
  }
}

/* 移除多余的600px媒体查询，避免规则冲突 */

2. JavaScript类名判断局限性 #

原JS用x.className === "navigation"做严格判断，如果WordPress主题的其他脚本给导航元素添加了额外类名，这个判断会直接失效。

修复：
使用classList方法操作类名，更稳定可靠：

function toggleMenu() {
  var x = document.getElementById("myTopnav");
  x.classList.toggle("responsive");
}

3. jQuery替代方案（可选） #

若习惯用jQuery，替换JS代码为：

jQuery(document).ready(function($) {
  $('.humbarger').on('click', function() {
    $('#myTopnav').toggleClass('responsive');
  });
});

内容的提问来源于stack exchange，提问作者Nick Rahi