如何为侧边菜单添加JavaScript交互功能？排查菜单无响应问题

尝试给侧边菜单添加JavaScript交互功能：点击id为trigger的汉堡图标时菜单滑出，点击id为closer的X按钮时菜单收起，但目前点击无任何效果。相关代码如下：

问题代码 #

JavaScript #

const menuTrigger = document.getElementById('trigger'); //1
menuTrigger.addEventListener("click", open); //5

const closeMenu = document.getElementById("closer"); //2
closeMenu.addEventListener("click", closed); //3

const sideMenu = document.getElementById('side-menu'); //4

function open() {
  sideMenu.classList.add("show");
}

function closed() {
  sideMenu.classList.remove("show");
}

CSS #

.show {
  opacity: 1;
  transform: translateX(0%);
  background-color: white;
}

#side-menu {
  position: fixed;
  opacity: 1;
  transform: translateX(100%);
  z-index: 20;
  background-color: #edeae5;
  top: 0;
  right: 0;
  height: 100vh;
  width: 20%;
  transition: transform 0.5s ease-in-out;
}

HTML #

<div class="nav-right">
  <ul>
    <li> <a href="#nav"> Home </a> </li>
    <li> <a href=# services> Services </a> </li>
    <li> <a href="#team"> Meet The Team</a> </li>
    <li> <a href="#philosophy"> Philosophy</a> </li>
    <li id="trigger"> <svg class="hamburger" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" style=" fill:#FFFFFF;"><path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2                                        5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"></path></svg>      </li>
  </ul>
</div>

<aside id="side-menu">
      <div class="side-head">
          <h1 id="side-img">
              CLIK
          </h1>
          <div class="side-right">
              <h1 id="closer">
                  X
              </h1>
          </div>
      </div>
      <div class="side-menu-links">
          <ul>
              <li class="side-menu-indv-link"> <img class="side-link-img" src="serv-black.png" alt=""> <a href="#services">Services</a></li>
              <li class=" side-menu-indv-link"> <img class="side-link-img" src="team-balck.png" alt=""><a href="#team">Meet The Team</a></li>
              <li class=" side-menu-indv-link"> <img class="side-link-img" src="phil-black.png" alt=""><a href="#philosophy">Philosophy</a></li>
          </ul>
      </div>
      <hr>
      <div class="side-menu-contact">
          <div class="side-menu-links">
              <ul>
                  <li class="side-menu-indv-link"> <img class="side-link-img" src="fb2.png" alt=""> <a href="#">Facebook</a></li>
                  <li class="side-menu-indv-link"> <img class="side-link-img" src="instagram2.png" alt=""><a href="#">Instagram</a></li>
                  <li class="side-menu-indv-link"> <img class="side-link-img" src="whatsapp.png" alt=""><a href="#">Whatspp</a></li>
              </ul>
              <hr>
          </div>
      </div>
  </aside>

问题原因 #

1. CSS优先级冲突：.show类选择器优先级低于#side-menuID选择器，导致添加类后transform样式不生效
2. 脚本执行时机错误：若JS代码在DOM未加载完成时执行，会无法获取元素，事件绑定失败
3. 函数命名冲突：open是浏览器内置方法，作为自定义函数名可能引发异常
4. HTML语法错误：Services链接的href=# services包含空格，属于无效属性值

修复方案 #

1. 提升CSS类优先级 #

修改.show选择器，增加ID前缀确保样式覆盖默认值：

#side-menu.show {
  opacity: 1;
  transform: translateX(0%);
  background-color: white;
}

#side-menu {
  position: fixed;
  opacity: 1;
  transform: translateX(100%);
  z-index: 20;
  background-color: #edeae5;
  top: 0;
  right: 0;
  height: 100vh;
  width: 20%;
  transition: transform 0.5s ease-in-out;
}

2. 确保脚本在DOM加载后执行 #

将JS代码包裹在DOMContentLoaded事件监听中，或放在HTML底部</body>标签前：

document.addEventListener('DOMContentLoaded', function() {
  const menuTrigger = document.getElementById('trigger');
  const closeMenu = document.getElementById('closer');
  const sideMenu = document.getElementById('side-menu');

  function openMenu() {
    sideMenu.classList.add("show");
  }

  function closeSideMenu() {
    sideMenu.classList.remove("show");
  }

  menuTrigger.addEventListener("click", openMenu);
  closeMenu.addEventListener("click", closeSideMenu);
});

3. 修复HTML语法错误 #

修正Services链接的href属性：

<li> <a href="#services"> Services </a> </li>

完成以上修改后，点击汉堡图标菜单会平滑滑出，点击X按钮可正常收起菜单。

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