如何实现响应式下拉菜单点击时切换'Menu'与'Close'文本

数据老陈

2026-7-27

响应式菜单文本切换及功能优化方案

关键修改步骤：

给菜单触发文本的<span>添加唯一id，方便JS精准获取
在点击函数中加入文本切换逻辑
优化JS变量声明，避免重复覆盖问题

修改后的完整代码：

HTML：

<header>
  <div class="open-menu"><span id="menuToggleText" onclick="myFunction()">Menu</span></div>
  <nav>...</nav>
</header>

JavaScript：

function myFunction() {
  // 获取页面元素
  const nav = document.querySelector("nav");
  const header = document.querySelector("header");
  const body = document.querySelector("body");
  const menuText = document.getElementById("menuToggleText");

  // 切换各类样式
  nav.classList.toggle("show-nav");
  header.classList.toggle("show-nav");
  body.classList.toggle("show-nav");

  // 切换菜单显示文本
  if (menuText.textContent === "Menu") {
    menuText.textContent = "Close";
  } else {
    menuText.textContent = "Menu";
  }
}

CSS（保留原有样式即可）：

.open-menu {
  display: block;
  cursor: pointer;
  font-size: 1.8rem;
  border-bottom: 1px solid white;
}

.open-menu:hover {
  border-bottom: 1px solid;
}

nav {
  display: none;
}

nav.show-nav {
  display: block;
  min-height: calc(100vh - 6.3rem);
}

header.show-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

body.show-nav {
  height: 0;
  overflow: hidden;
}