响应式站点下拉菜单无法正常收起问题求助

问题排查 #

• 选择器不匹配：HTML中的菜单图标未添加toggle-menu类，但JavaScript代码反复尝试获取该类元素，导致toggleIcon为null，执行toggleIcon.classList.toggle('rotate')时抛出错误，中断函数执行，菜单仅能完成一次展开操作。
• 图标层级异常：CSS中给菜单图标设置z-index: -2，使其处于所有元素下方，可能导致点击事件无法正常触发。
• 导航栏位置冲突：导航ul初始设置transform: translateX(230%)，即使添加show-menu类将top设为0，ul仍处于屏幕可视区域外，且transition仅监听top属性，未包含transform过渡效果。

修复方案 #

1. 修正选择器匹配问题

在HTML的菜单图标标签上添加toggle-menu类，确保JavaScript能正确定位元素：

<nav>
  <img src="../images/shotbyopi.logo (5).png" alt="logoPic" />
  <ul id="sidemenu">
    <li><a href="#">Home</a></li>
    <hr />
    <li><a href="#about-1">About</a></li>
    <hr />
    <li><a href="#wrapper">Services</a></li>
    <hr />
    <li><a href="#contact">Contact</a></li>
  </ul>
  <!-- 添加toggle-menu类 -->
  <i class="fa-solid fa-circle-chevron-down toggle-menu" onclick="toggleMenu()"></i>
</nav>

2. 调整图标层级与点击可用性

修改CSS中菜单图标的z-index为较高值，确保它能被正常点击：

@media (min-width: 481px) and (max-width: 768px) {
  nav .fa-circle-chevron-down {
    display: block;
    font-size: 85px;
    position: fixed;
    top: 20px;
    right: 20px;
    color: transparent;
    -webkit-text-stroke: 4px #fff;
    z-index: 99; /* 修正z-index，确保图标在顶层 */
    transition: transform 0.5s ease-in-out;
    margin-top: 60px;
    cursor: pointer;
  }
  /* 其余CSS代码保持不变 */
}

3. 修复导航栏位置与过渡效果

移除ul初始的transform: translateX(230%)，确保菜单通过top属性正常滑入滑出：

@media (min-width: 481px) and (max-width: 768px) {
  nav ul {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-left: 0;
    background: transparent;
    position: fixed;
    text-align: center;
    margin-top: 20px;
    top: -100vh;
    left: 0;
    width: 27%;
    height: 100vh;
    padding: 50px 20px;
    z-index: 2;
    /* 移除transform: translateX(230%)，避免位置冲突 */
    transition: top 0.5s ease-in-out;
  }
  /* 其余CSS代码保持不变 */
}

4. 优化JavaScript代码

增加空值判断，避免因toggleIcon不存在导致函数中断：

function toggleMenu() {
  const menu = document.getElementById('sidemenu');
  const toggleIcon = document.querySelector('.toggle-menu');

  menu.classList.toggle('show-menu');
  // 增加空值判断，防止报错中断逻辑
  if (toggleIcon) {
    toggleIcon.classList.toggle('rotate');
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const toggleIcon = document.querySelector('.toggle-menu');

  if (toggleIcon) {
    toggleIcon.addEventListener('click', toggleMenu);
  } else {
    console.error('Element with class "toggle-menu" not found.');
  }
});

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