点击按钮切换图标失效求助：无法从fa-bars切换为fa-xmark

问题原因 #

你的代码存在两个关键问题：

1. HTML结构错误：.toggle_btn的<div>标签未闭合，导致.dropdown-menu被错误嵌套在.toggle_btn内部，干扰了DOM元素选择和事件触发逻辑。
2. 类切换写法不够稳妥：直接赋值classList虽能临时生效，但后续若需给图标添加其他类会被直接覆盖，精准度不足。

修复后的代码 #

HTML部分（修复结构）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<a href="#" class="sign_btn">Signup</a>

<div class="toggle_btn">
    <i class="fa-solid fa-bars"></i>
</div> <!-- 补上闭合标签，修正DOM结构 -->

<div class="dropdown-menu">
  <li><a href="hero">Home</a></li>
  <li><a href="hero">Task</a></li>
  <li><a href="hero">File</a></li>
  <li><a href="hero">About</a></li>
  <li><a href="#" class="sign_btn">Signup</a></li>
</div>

JavaScript部分（优化类切换）

const toggleBtn = document.querySelector('.toggle_btn')
const toggleBtnIcon = document.querySelector('.toggle_btn i')
const dropDownMenu = document.querySelector('.dropdown-menu')

toggleBtn.onclick = function() {
  dropDownMenu.classList.toggle('open')
  const isOpen = dropDownMenu.classList.contains('open')

  // 仅切换需要变化的图标类，保留fa-solid基础类
  if (isOpen) {
    toggleBtnIcon.classList.remove('fa-bars')
    toggleBtnIcon.classList.add('fa-xmark')
  } else {
    toggleBtnIcon.classList.remove('fa-xmark')
    toggleBtnIcon.classList.add('fa-bars')
  }
}

说明 #

• 修正HTML结构后，.toggle_btn与.dropdown-menu为同级元素，确保querySelector能正确获取目标元素，点击事件逻辑不受嵌套干扰。
• 使用classList.remove()和classList.add()切换图标类，仅修改需要变化的部分，保留Font Awesome的基础样式类，避免意外覆盖其他自定义样式。

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