JS导航面板控制函数多次调用后失效问题求助

问题背景 #

我们网站通过JS实现导航面板的开合功能，导航项均为带href的链接，兼容未启用JS的访问场景。核心逻辑是用JS拦截链接点击事件，修改CSS控制面板显示/隐藏。初期运行正常，但多次调用后会随机失效，触发链接默认跳转行为，其中id="nvbtn3"的导航项最常出现该问题。

相关代码 #

事件委托监听代码 #

$('mstrwrap').addEventListener('click', function(e) {
  // set eventlisteners for all A HREF links
  if (e.target.nodeName === 'A') {
    e.preventDefault();

    // check if is navbar link
    if ((e.target.id.includes('nvbtn'))) {
      // determine matching nav panel
      const nvpnl = e.target.id;
      const lk = 'nav' + nvpnl.match(/\d+/g);
      // open nav panel
      openNav(lk, nvpnl);
    }
    // end if navbar link

  // lots more possible targets

  }
}

导航面板开合函数 #

function openNav(x, y) {
  // if already open, close it
  if ($(x).style.maxHeight === '100vh') {
    // close
    $(x).style.maxHeight = '0';
    $(x).style.zIndex = '';
    $(y).classList.remove('nvopen');
    $('nvbar').classList.remove('nvopen2');
  }

  // close any that are open, then open target
  else {
    // close all pnl, open specified pnl
    const targets = document.querySelectorAll('[id^="nav"]');
    for (let i = targets.length; i--;) {
      targets[i].style.maxHeight = '0';
      targets[i].style.zIndex = '';
    }
    const nvbtns = document.querySelectorAll('[id^="nvbtn"]');
    for (let i = nvbtns.length; i--;) {
      nvbtns[i].classList.remove('nvopen');
    }
    $(x).style.maxHeight = '100vh';
    $(x).style.zIndex = '5';
    $(y).classList.add('nvopen');
    $('nvbar').classList.add('nvopen2');
  }
}

伪jQuery选择器函数 #

var $ = function (selector) {
  return document.getElementById(selector);
};

导航栏链接代码 #

<a href="https://example.com/menu1.htm" id="nvbtn1">Menu 1</a>
<a href="https://example.com/menu2.htm" id="nvbtn2">Menu 2</a>
<a href="https://example.com/menu3.htm" id="nvbtn3">Menu 3</a>

问题排查方向 #

1. 事件匹配漏洞：当前仅判断e.target.nodeName === 'A'，若<a>标签内部包含子元素（如图标、<span>），点击子元素时e.target会指向子元素而非<a>，导致e.preventDefault()未执行，触发默认跳转——这很可能是nvbtn3频繁失效的核心原因。
2. 正则匹配逻辑缺陷：nvpnl.match(/\d+/g)返回数组，直接拼接会导致nav后跟随数组字符串（如匹配到多个数字时变成nav1,2），无法正确获取面板元素，进而引发函数报错，中断事件处理流程。
3. 元素存在性未校验：若$(x)返回null（如正则匹配错误），访问null.style会抛出错误，导致事件处理函数中断，后续逻辑失效。
4. 内联样式判断不可靠：$(x).style.maxHeight === '100vh'仅能检测内联样式，若样式通过类名设置，判断会失效，导致面板开合逻辑混乱。

解决建议 #

1. 修复事件委托的目标匹配逻辑 #

使用closest('a')获取点击元素的最近<a>父元素，确保即使点击子元素也能正确拦截事件：

$('mstrwrap').addEventListener('click', function(e) {
  const link = e.target.closest('a');
  if (link) {
    e.preventDefault();
    if (link.id.includes('nvbtn')) {
      const numMatch = link.id.match(/\d+/);
      if (!numMatch) return; // 无匹配数字时直接返回
      const lk = 'nav' + numMatch[0];
      openNav(lk, link.id);
    }
  }
  // 其他目标处理逻辑
});

2. 添加元素存在性校验，避免报错中断 #

在openNav函数开头添加元素存在性判断，防止因元素不存在引发的报错：

function openNav(x, y) {
  const panel = $(x);
  const btn = $(y);
  const nvbar = $('nvbar');
  if (!panel || !btn || !nvbar) return; // 元素不存在时直接终止

  if (panel.style.maxHeight === '100vh') {
    panel.style.maxHeight = '0';
    panel.style.zIndex = '';
    btn.classList.remove('nvopen');
    nvbar.classList.remove('nvopen2');
  } else {
    // 用forEach替代反向for循环，代码更简洁
    document.querySelectorAll('[id^="nav"]').forEach(target => {
      target.style.maxHeight = '0';
      target.style.zIndex = '';
    });
    document.querySelectorAll('[id^="nvbtn"]').forEach(btnEl => btnEl.classList.remove('nvopen'));
    
    panel.style.maxHeight = '100vh';
    panel.style.zIndex = '5';
    btn.classList.add('nvopen');
    nvbar.classList.add('nvopen2');
  }
}

3. 改用类名控制样式，提升逻辑稳定性 #

放弃直接操作内联样式，通过类名控制面板状态，避免样式判断失效：

CSS 新增样式

.nav-panel {
  max-height: 0;
  z-index: auto;
  transition: max-height 0.3s ease;
  /* 其他基础样式 */
}
.nav-panel.open {
  max-height: 100vh;
  z-index: 5;
}

修改openNav函数

function openNav(x, y) {
  const panel = $(x);
  const btn = $(y);
  const nvbar = $('nvbar');
  if (!panel || !btn || !nvbar) return;

  const isOpen = panel.classList.contains('open');
  if (isOpen) {
    panel.classList.remove('open');
    btn.classList.remove('nvopen');
    nvbar.classList.remove('nvopen2');
  } else {
    // 关闭所有面板
    document.querySelectorAll('[id^="nav"]').forEach(p => p.classList.remove('open'));
    document.querySelectorAll('[id^="nvbtn"]').forEach(b => b.classList.remove('nvopen'));
    // 打开目标面板
    panel.classList.add('open');
    btn.classList.add('nvopen');
    nvbar.classList.add('nvopen2');
  }
}

4. 确保事件监听的稳定性 #

若mstrwrap元素存在动态替换的情况，将事件委托绑定到更上层的稳定元素（如document），避免监听失效：

document.addEventListener('click', function(e) {
  const link = e.target.closest('a');
  if (!link || !link.closest('#mstrwrap')) return; // 仅处理mstrwrap内的链接
  // 后续逻辑同上
});

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