Javascript 函数在前几次迭代中有效，然后失败

问：

我们使用 JS 来打开和关闭我们网站上的导航面板。每个导航栏选项都是一个 href 链接，用于未启用 JS 的人访问我们的网站。我们正在使用 JS 拦截链接并通过 CSS 更改打开面板。

该函数在调用的前几次运行良好，然后失败并遵循默认链接。在失败之前似乎没有固定的迭代次数，但 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

  }
}

用于打开导航菜单的JS函数

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);
};

导航栏是简单的 href 链接

<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>