JavaScript下拉菜单点击按钮count计数不更新问题排查

问题原因与修复方案 #

1. DOM选择器错误 #

你在JS中使用类选择器.btn获取按钮，但HTML中按钮定义的是id="btn"，类选择器和id选择器混淆会导致btn变量为null，事件绑定直接失效。如果你的实际运行环境可以触发点击事件，说明你大概率是在测试时手动给按钮加了btn类，或者写代码时把选择器写混了。
正确的选择器写法：

const btn = document.querySelector('#btn');

2. 显示隐藏逻辑完全颠倒 #

你的.drop__down元素初始CSS设置是display: none（默认隐藏），当前代码的逻辑完全不符合点击切换的预期：

• 初始count=0，第一次点击时你设置div.style.display = 'none'，等于和初始状态一致没有变化，count加1变为1
• 第二次点击count=1，你设置display: block显示菜单，count减1变为0
  如果要实现点击按钮切换下拉菜单的显示/隐藏，修正后的事件逻辑如下：

const btn = document.querySelector('#btn');
const div = document.querySelector('.drop__down');

let count = 0;

btn.addEventListener('click', function() {
  if (count === 0) {
      // 第一次点击 显示菜单
      count += 1;
      div.style.display = 'block';
  } else {
      // 第二次点击 隐藏菜单
      count -= 1;
      div.style.display = 'none';
  }
});

额外优化建议 #

你完全不需要额外定义count变量来记录状态，直接读取下拉菜单当前的状态判断即可，代码更简洁：

const btn = document.querySelector('#btn');
const div = document.querySelector('.drop__down');

btn.addEventListener('click', function() {
  const isHidden = div.style.display === 'none' || div.style.display === '';
  div.style.display = isHidden ? 'block' : 'none';
});

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