jQuery Toggle第二次点击失效：下拉菜单无法正常切换显示

我来帮你搞定这个下拉菜单的bug~ 你遇到的第二次点击后ul持续隐藏的问题，大概率是事件冒泡或者状态控制逻辑混乱导致的，咱们一步步来排查和解决：

先补全你的基础代码（方便后续调试） #

首先我把你没写完的CSS补全，还原一个标准的下拉菜单样式：

#selectDiv {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid #ddd;
  display: inline-block;
  min-width: 40px;
}
#select {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none; /* 默认隐藏 */
  border: 1px solid #ddd;
  border-top: none;
  width: 100%;
}
.liNum {
  padding: 8px 12px;
  background: #fff;
}
.liNum:hover {
  background: #f8f8f8;
}

问题根源分析 #

你提到的toggle失效，最常见的原因是：

• 点击下拉选项（<li>）时，事件会冒泡到父元素<div id="selectDiv">，导致toggle逻辑被意外触发两次：第一次点击selectDiv显示ul，点击li时冒泡又触发一次toggle，直接把ul隐藏了；第二次再点击selectDiv时，状态已经混乱，导致ul一直隐藏。
• 如果是直接操作display属性而非用类切换，也容易出现状态判断错误的情况。

解决方案：用类控制+阻止事件冒泡 #

下面给出原生JS和jQuery两种方案，你可以根据自己的技术栈选择：

方案1：原生JavaScript实现

// 获取元素
const selectDiv = document.getElementById('selectDiv');
const selectUl = document.getElementById('select');
const liItems = document.querySelectorAll('.liNum');

// 点击父元素切换下拉显示状态
selectDiv.addEventListener('click', () => {
  selectUl.classList.toggle('show');
});

// 处理选项点击事件
liItems.forEach(li => {
  li.addEventListener('click', (e) => {
    // 阻止事件冒泡到父元素，避免误触发toggle
    e.stopPropagation();
    // 更新显示的数字
    selectDiv.firstChild.textContent = li.textContent;
    // 选择后主动隐藏下拉
    selectUl.classList.remove('show');
  });
});

同时在CSS里添加类控制显示：

#select.show {
  display: block;
}

方案2：jQuery实现

如果你用jQuery开发，代码会更简洁：

$('#selectDiv').click(function() {
  $('#select').toggle();
});

$('.liNum').click(function(e) {
  // 阻止冒泡
  e.stopPropagation();
  // 更新显示文本
  $('#selectDiv').text($(this).text());
  // 隐藏下拉
  $('#select').hide();
});

关键注意点 #

1. 阻止事件冒泡：这是解决问题的核心，必须让li的点击事件不传递到父元素，避免toggle被重复触发。
2. 用类控制显示状态：相比直接修改display属性，用类切换的方式更清晰，状态更可控，不容易出现逻辑混乱。
3. 选择后主动隐藏下拉：这是提升用户体验的细节，选完选项后自动收起下拉，符合用户预期。

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