如何为动态创建的列表项添加鼠标悬停事件并实现下拉切换效果？

问题梳理 #

• 列表项鼠标悬停样式不生效，且错误使用延时重置颜色
• 点击按钮重复生成列表项，需实现显示/隐藏切换并保留选中项

修正方案 #

1. 优化HTML（修正类名拼写错误）

<div class="dropdownMain">
  <button id="dropdownBtn" class="dropdownBtn">Select Country</button>
  <div id="dropdownList" class="dropdownList">
  </div>
</div>

2. 添加CSS（统一管理样式，包含悬停效果）

.dropdownBtn {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.dropdownList {
  display: none; /* 默认隐藏列表 */
  margin-top: 0.5rem;
  padding: 0;
}

.dropdownList li {
  list-style: none;
  color: #ff0000;
  padding: 0.5rem 1.1rem;
  border-radius: 5px;
  margin: 0.2rem 0;
  cursor: pointer;
}

.dropdownList li:hover {
  color: black;
  background-color: lightpink;
}

3. 重构JavaScript（实现切换逻辑与选中功能）

const countries = ["India", "Ireland", "USA", "UK"];
const dropdownBtn = document.getElementById("dropdownBtn");
const dropdownList = document.getElementById("dropdownList");

// 仅初始化一次列表
function initDropdownList() {
  countries.forEach(country => {
    const listItem = document.createElement("li");
    listItem.textContent = country;
    
    // 点击列表项同步选中值并隐藏列表
    listItem.addEventListener("click", () => {
      dropdownBtn.textContent = country;
      dropdownList.style.display = "none";
    });
    
    dropdownList.appendChild(listItem);
  });
}

// 页面加载时生成列表
initDropdownList();

// 按钮点击切换列表显示状态
dropdownBtn.addEventListener("click", (e) => {
  e.stopPropagation();
  dropdownList.style.display = dropdownList.style.display === "block" ? "none" : "block";
});

// 点击页面其他区域隐藏列表
document.addEventListener("click", () => {
  dropdownList.style.display = "none";
});

关键修正点说明 #

• 用CSS:hover替代JS的mouseover事件，样式管理更简洁，避免DOM操作冗余
• 列表项仅初始化一次，彻底解决重复生成问题
• 通过切换display属性实现列表的显示/隐藏，而非重复创建元素
• 新增列表项点击选中逻辑，同步选中值到按钮文本
• 添加页面点击隐藏逻辑，提升交互体验

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