下拉菜单Toggle失效：图标不显示且选项功能异常求助

问题根源与修复步骤 #

1. 图标不显示 #

• 问题：未引入Font Awesome图标库，且图标类名格式错误
• 修复：
  • 在HTML的<head>中加入Font Awesome CDN：

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    

  • 将图标元素的类名修改为：<i class="fas fa-caret-down"></i>

2. 点击Toggle功能失效 #

• 问题：JavaScript中addEvenListener拼写错误（缺少字母t）
• 修复：将方法名改为addEventListener，确保按钮点击事件正常绑定

3. CSS样式异常 #

• 菜单默认显示：给.select-job .options添加display: none，仅在active状态下显示
• 图标旋转错误：将.select-job.active .select-btn改为.select-job.active .select-btn i，仅旋转图标而非整个按钮
• 选择器错误：.options option改为.options .option，匹配HTML中的<li class="option">元素
• 无效样式：.select-btn的height: 10px改为height: 55px；font-weight: 400px改为font-weight: 400（font-weight无px单位）

4. 选项点击功能修复 #

原JS逻辑正确，修复上述问题后，点击选项即可更新按钮文本并收起菜单

修正后的完整代码 #

HTML #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper2">
  <nav class="navbar">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">UPLOAD FILE</a></li>
      <li><a href="#">DETAILS</a></li>
      <li><a href="#">CLASSIFICATION</a></li>
      <li><a href="#">SHORTLISTED</a></li>
      <li><a href="#">ANALYSIS</a></li>
    </ul>
  </nav>
  <div class="select-job">
    <h2>Choose the job's field</h2>
    <div class="select-btn">
      <span class="btn-text">JOB's FIELD</span>
      <i class="fas fa-caret-down"></i>
    </div>

    <ul class="options">
      <li class="option">
        <span class="option-text">Information Technology and Software Development</span>
      </li>
      <li class="option">
        <span class="option-text">Digital Marketing</span>
      </li>
      <li class="option">
        <span class="option-text">Finance</span>
      </li>
    </ul>
  </div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS #

.center h2 {
  font-size: 25px;
  font-weight: bold;
  width: 900px;
  text-align: center;
  padding: 60px;
}

.select-job {
  width: 400px;
  margin: 70px auto;
}

.select-job .select-btn {
  display: flex;
  height: 55px;
  background: #fff;
  padding: 0 20px;
  font-size: 18px;
  font-weight: 400;
  border-radius: 8px;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.select-btn i {
  font-size: 25px;
  transition: 0.2s;
}

.select-job.active .select-btn i {
  transform: rotate(-180deg);
}

.select-job .options {
  display: none;
  position: relative;
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.select-job.active .options {
  display: block;
}

.options .option {
  display: flex;
  height: 55px;
  cursor: pointer;
  padding: 0 16px;
  border-radius: 8px;
  align-items: center;
  background: #fff;
}

.options .option:hover {
  background: #F2F2F2;
}

.option .option-text {
  font-size: 18px;
  color: #333;
}

JavaScript #

const optionMenu = document.querySelector(".select-job"),
  selectBtn = optionMenu.querySelector(".select-btn"),
  options = optionMenu.querySelectorAll(".option"),
  btn_next = optionMenu.querySelector(".btn-text");

selectBtn.addEventListener("click", () => optionMenu.classList.toggle("active"));

options.forEach(option => {
  option.addEventListener("click", () => {
    let selectOption = option.querySelector(".option-text").innerText;
    btn_next.innerText = selectOption;

    optionMenu.classList.remove("active")
  })
})

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