Webpack编译后classList.toggle重复添加类而非切换问题排查

原生DOM的classListAPI自带类名去重逻辑，不可能对同一个元素重复添加已存在的类，你遇到的类名重复问题本质是几个问题叠加导致的：

• 你在模块初始化时缓存了mapEl、list的DOM引用，Leaflet执行map.remove()销毁实例时会重建/替换挂载容器的DOM结构，Webpack打包后模块作用域的缓存不会自动更新，导致你后续调用classList.toggle时操作的是已经脱离文档流的旧DOM节点，页面上真实渲染的元素类名没有被正确修改。
• 你同时对visible、not-visible两个互斥类做toggle操作，一旦某一步DOM操作失效，两个类的状态就会不同步，进一步放大异常。
• 额外提一句：你用Array.map遍历按钮修改disabled属性是不规范的，map是用来生成新数组的方法，遍历执行副作用应该用forEach，部分打包转译规则对这类不符合预期写法的处理会出现非预期行为。

• 移除模块顶层对mapEl、list的变量缓存，每次执行切换逻辑前重新查询DOM获取最新的元素引用，避免操作失效的旧节点。
• 简化类切换逻辑，只保留一个状态类即可，不需要同时维护两个互斥类，减少toggle操作的次数。比如仅保留not-visible类，元素带该类时隐藏，移除该类时显示。
• 销毁地图实例后重置map变量的引用，避免下次执行逻辑时出现误判。
• 把遍历按钮的map方法替换为forEach。

修改后的核心逻辑代码如下：

const mapHandler = async id => {
  let brewery;
  if (id) {
    brewery = await fetchBreweries.get('/' + id);
    if (!brewery.latitude || !brewery.longitude) {
      alert('Sorry, this entry has no coordinates.');
      return;
    }
  }
  if (!id) {
    // 关闭地图逻辑
    footerBtns.forEach(btn => btn.disabled = false);
    if (map) {
      map.remove();
      map = null; // 重置引用避免误判
    }
  }
  // 每次操作前重新获取最新DOM引用
  const mapEl = document.querySelector('填写你的地图容器选择器');
  const listEl = document.querySelector('填写你的列表容器选择器');
  // 仅切换单个状态类即可
  mapEl.classList.toggle('not-visible');
  listEl.classList.toggle('not-visible');

  if (!id) return;
  // 打开地图逻辑
  footerBtns.forEach(btn => btn.disabled = true);
  if (aroundMyLocation) {
    buildMap(myLocation);
    setTimeout(() => {
      map.flyTo([brewery.latitude, brewery.longitude], 12, {duration: 3})
    }, 800);
    setTimeout(() => {
      L.marker([brewery.latitude, brewery.longitude])
        .addTo(map)
        .bindPopup(brewery.name)
        .openPopup();
    }, 1200);
  } else {
    buildMap({lat: brewery.latitude, lng: brewery.longitude});
    L.marker([brewery.latitude, brewery.longitude])
      .addTo(map)
      .bindPopup(brewery.name)
      .openPopup();
  }
  details.innerHTML = `
    <h3>${brewery.name}</h3>
    <p>${brewery.phone || 'number unknown'}</p>
    <p>${brewery.street || 'street unknown'}</p>
    <p>${brewery.city || 'city unknown'}</p>
  `;
};

如果改完上述逻辑还是有类名重复问题，检查你的Babel或Webpack配置里是否引入了老旧的classList polyfill，这类第三方polyfill很多实现不符合W3C规范，没有内置类名去重逻辑，直接移除相关polyfill即可，现代浏览器全量原生支持classList API，不需要额外打补丁。

问题现象参考截图：

内容的提问来源于stack exchange，提问作者Bram-peter van Zalk