点击菜单按钮时退出图标无法显示的技术求助

我看了你的代码，问题主要出在JavaScript逻辑不完整，还有一些细节需要调整，下面一步步帮你解决：

1. 补充菜单按钮的点击逻辑 #

你的当前JS代码只处理了菜单的显示，但没有控制退出图标的显示/隐藏。点击菜单按钮时，需要同时显示退出图标、隐藏菜单按钮；还要添加退出按钮的关闭逻辑：

修改你的JavaScript代码：

// 提前获取元素，避免每次点击重复查询DOM
const menuBtn = document.getElementById('menuBtn');
const exitBtn = document.getElementById('exitBtn');
const menus = document.querySelectorAll('.menu');

menuBtn.addEventListener('click', () => {
  // 显示菜单
  menus.forEach(el => el.style.display = 'block');
  // 切换按钮显示状态：显示退出按钮，隐藏菜单按钮
  exitBtn.style.display = 'block';
  menuBtn.style.display = 'none';
});

// 添加退出按钮的点击事件，关闭菜单并切换按钮状态
exitBtn.addEventListener('click', () => {
  menus.forEach(el => el.style.display = 'none');
  exitBtn.style.display = 'none';
  menuBtn.style.display = 'block';
});

2. 调整CSS中退出图标的定位与层级 #

你设置了退出图标的z-index:999，但菜单没有设置层级，加上菜单是全屏fixed，可能会盖住退出按钮。另外退出图标的定位可以更灵活：

修改CSS部分：

/*Menu Button*/ 
.fa.fa-bars.menuBtn { 
  color: #fff; 
  font-size: 35px; 
  cursor: pointer; 
  display: none; 
} 
.fa.fa-times-circle.exit { 
  position: fixed;
  top: 25px;
  right: 25px;
  color: white; 
  font-size: 35px; 
  cursor: pointer; 
  display: none; 
  z-index: 999; /* 保持最高层级，确保不被菜单盖住 */
} 
@media (max-width: 934px) { 
  .max-width { 
    padding: 0 50px; 
  } 
  .fa.fa-bars.menuBtn { 
    display: block; 
    /* padding-left: 10em; 这个定位可以根据需求调整，比如用margin-right */
  } 
  .menu { 
    position: fixed; 
    height: 100vh; 
    width: 100%; 
    left: 0; 
    top: 0; 
    background-color: #111; 
    text-align: center; 
    padding-top: 110px; 
    display: none; 
    z-index: 998; /* 设置比退出图标低的层级，避免遮挡 */
  } 
  .menu ul li { 
    display: block; 
  } 
  .menu ul li a { 
    display: inline-block; 
    margin: 20px 0; 
    font-size: 35px; 
  } 
}

3. 修复Font Awesome图标引入问题 #

你当前引入的fontawesome.min.css只包含核心样式，不包含具体的图标（比如fa-times-circle属于solid风格图标）。替换成完整的图标包：

<!-- 替换原来的link标签 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">

4. 额外优化：简化DOM操作 #

原来的代码每次点击都重新查询.menu元素，提前获取并存储可以提升性能，就像第一步的JS代码里做的那样。

做完这些调整后，点击菜单按钮就能正常显示退出图标，点击退出图标也能关闭菜单了。

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