如何创建不退出页面的设置菜单？当前代码存在显示异常问题

先梳理你现有代码里的几个核心问题：

• HTML标签语法错误：<a>标签未闭合，且内联事件名大小写不一致（OnClick应为onclick）
• JS语法错误：DOM元素没有show属性，不能直接用div.menu.show=(true)控制显示
• 菜单默认未隐藏：未设置初始隐藏状态，导致一直显示

以下是修正后的完整实现方案：

1. 基础结构与样式（HTML+CSS） #

<style>
/* 图标样式调整，align改为text-align */
.material-symbols-outlined {
  text-align: right;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
  cursor: pointer; /* 增加鼠标指针提示 */
}

/* 设置菜单默认隐藏 */
.menu {
  display: none;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
}
</style>

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<!-- 修正标签问题，用span替代a（非跳转场景更合适），添加ID方便JS获取 -->
<span class="material-symbols-outlined" id="settingsBtn">
engineering
</span>

<div class="menu" id="settingsMenu">
  <p>Settings</p>
  <!-- 可添加更多设置项 -->
</div>

2. 事件控制逻辑（JS） #

// 获取目标元素
const settingsBtn = document.getElementById('settingsBtn');
const settingsMenu = document.getElementById('settingsMenu');

// 用事件监听替代内联onclick，符合现代前端规范
settingsBtn.addEventListener('click', function() {
  // 切换菜单显示状态：隐藏则显示，显示则隐藏
  if (settingsMenu.style.display === 'none' || settingsMenu.style.display === '') {
    settingsMenu.style.display = 'block';
  } else {
    settingsMenu.style.display = 'none';
  }
});

关键修改说明 #

• HTML修正：去掉语义不合适的<a>标签（非跳转场景用<span>更合理），修正标签闭合问题，添加ID便于JS定位元素
• CSS修正：给菜单添加display: none设置默认隐藏，优化图标交互提示
• JS优化：
  • 使用addEventListener替代内联onclick，代码更易维护、符合规范
  • 通过style.display控制元素显隐，这是DOM元素的标准操作方式
  • 实现点击图标切换菜单状态的逻辑，而非单纯的单次显示

扩展建议（优雅过渡效果） #

如果需要淡入淡出的过渡效果，可改用CSS类切换的方式：

.menu {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  /* 保留其他样式 */
}

.menu.active {
  opacity: 1;
  visibility: visible;
}

对应的JS修改为：

settingsBtn.addEventListener('click', function() {
  settingsMenu.classList.toggle('active');
});

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