多次悬停时Mouseover事件失效问题求助

嘿，我仔细扒了你的代码，多次触发mouseover后功能失效的问题主要来自几个函数逻辑错误、DOM元素引用失误，还有状态管理混乱。咱们一步步拆解解决：

问题根源 #

• 函数逻辑写串了

  • otherProductsGone()函数里，你误把要隐藏的listOtherProducts写成了listFrozenSeaProducts，导致每次调用这个函数时，海鲜面板被错误隐藏，多次触发后面板状态彻底乱套：

    function otherProductsGone(){
      // 错误：应该操作listOtherProducts
      document.getElementById("listFrozenSeaProducts").style.display="none";
    }
    

  • removeFreshFood()和frozenFoodGone()里引用的getRidOfFreshFood、getRidOfFrozenFood元素，在你提供的HTML里根本不存在！每次调用这些函数都会抛出Cannot set properties of null错误，直接阻断后续DOM操作，看起来就是功能“失效”了。

• 状态管理没统一
  多个显示面板的函数（比如seaFoodDisplay()、milkProductsDisplay()）切换面板时，只隐藏部分面板，没有彻底重置所有状态，多次触发后不同面板的显示状态互相冲突，导致后续操作无响应。

修复方案 #

1. 修正函数逻辑错误 #

先把写错的函数和无效的元素引用改过来：

// 修复otherProductsGone：隐藏正确的面板
function otherProductsGone(){
  document.getElementById("listOtherProducts").style.display="none";
}

// 修复removeFreshFood：隐藏实际存在的freshProducts面板
function removeFreshFood(){
  const freshElem = document.getElementById('freshProducts');
  if(freshElem) freshElem.style.display="none";
}

// 修复frozenFoodGone：隐藏实际存在的listFrozenProducts面板
function frozenFoodGone(){
  const frozenElem = document.getElementById('listFrozenProducts');
  if(frozenElem) frozenElem.style.display="none";
}

2. 统一状态重置逻辑 #

在每个显示面板的函数开头，先调用全局重置函数，确保所有面板先隐藏，再显示目标面板，避免状态冲突：
比如修改seaFoodDisplay()：

function seaFoodDisplay() {
  // 先重置所有面板状态
  ProductsGone();
  removeFreshFood();
  // 再显示目标面板
  document.getElementById('listFrozenProducts').style.display="block";
  document.getElementById('listFrozenSeaProducts').style.display="block";
}

3. 增加元素存在性判断 #

所有DOM操作前先判断元素是否存在，避免报错阻断后续代码：

const elem = document.getElementById('目标ID');
if(elem) {
  elem.style.display = 'block'; // 或者'none'
}

4. 补全缺失的HTML结构 #

你提供的HTML代码是截断的（比如<table>标签没闭合），要确保所有函数引用的元素ID都在HTML中存在，比如如果getRidOfFreshFood是你计划添加的元素，记得补全到HTML里，否则就直接用现有存在的元素ID。

额外优化建议 #

可以把面板状态管理用一个统一的函数封装，避免重复写DOM操作：

// 统一隐藏所有面板
function hideAllPanels() {
  // 列出所有面板ID
  const panelIds = [
    "listFrozenProducts", 
    "listFrozenSeaProducts", 
    "listMilkProducts", 
    "listOtherProducts",
    "freshProducts",
    "listMeatProducts"
  ];
  panelIds.forEach(id => {
    const elem = document.getElementById(id);
    if(elem) elem.style.display = 'none';
  });
}

之后每个显示函数只要先调用hideAllPanels()，再显示目标面板就行，逻辑更清晰，也不容易出错。

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