如何解决点击菜单图标后菜单仅短暂显示随即消失的问题

你的按钮只显示一秒就消失，核心原因是菜单图标所在的<a>标签用了href=""，点击后会触发页面刷新，刚设置的按钮可见状态被重置了。

修复步骤： #

• 把菜单图标的<a>标签里的href=""替换成href="javascript:void(0)"，或者直接删掉href属性，阻止页面跳转刷新。
• （可选）用CSS类控制显示状态，比直接操作style更易维护。

修改后的完整代码： #

HTML

<link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

<div class="topnav">
  <!-- 这里修改了href属性，阻止页面刷新 -->
  <a href="javascript:void(0)" style="visibility: visible;" onclick="showMenu()" class="button"><span class="material-symbols-outlined">menu</span></a>
  <a href="home.html" id="active" class="button">Home</a>
  <a href="aboutme.html" class="button">About Me</a>
  <a href="projects.html" class="button">Projects</a>
  <a href="contact.html" class="button">Contact Me</a>
  <div class="topnav-right">
    <a href="home.html" class="button"><span class="material-symbols-outlined">home</span></a>
    <a href="aboutme.html" class="button"><span class="material-symbols-outlined">person</span></a>
    <a href="projects.html" class="button"><span class="material-symbols-outlined">workspaces</span></a>
    <a href="contact.html" class="button"><span class="material-symbols-outlined">contact_mail</span></a>
  </div>
</div>

JavaScript

function showMenu() {
  var buttons = document.getElementsByClassName("button");
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].style.visibility = "visible";
  }
}

CSS（无需修改，保持原代码即可）

.topnav {
  position: fixed;
  width: 98%;
  height: 60px;
  overflow: hidden;
  top: 0;
  border: 2px solid black;
  border-radius: 10px;
  padding: 5px;
  background-color: white;
  opacity: 0.5;
}

.topnav:hover {
  opacity: 1.0;
}

.material-symbols-outlined {
  transform: scale(2);
}

#welcome {
  margin-top: 80px;
}

.button {
  float: left;
  color: #000000;
  text-align: center;
  padding-top: 12px;
  text-decoration: none;
  height: 50px;
  width: 130px;
  margin-right: 5px;
  visibility: hidden;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
  text-decoration: underline;
  font-weight: bold;
}

.topnav a#active {
  background-color: #4bc497;
}

.topnav-right {
  float: right;
}

可选优化：用CSS类控制显示 #

如果想更优雅地控制显示状态，可以给.button添加一个.visible类，代替直接修改style：

修改CSS：

.button.visible {
  visibility: visible;
}

修改JavaScript：

function showMenu() {
  var buttons = document.getElementsByClassName("button");
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].classList.add("visible");
  }
}

这样后续要调整显示逻辑时，直接修改CSS类即可，更符合前端开发最佳实践。

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