下拉菜单点击跳转异常：JS未正确指向指定href链接

问题根源 #

1. 重复事件绑定引发冲突：同时给.dropdown-container-var ul li和.dropdown-container-var绑定了菜单展开的点击事件，点击列表项时会触发两次展开逻辑，直接干扰跳转事件的执行。
2. 目标元素查询逻辑错误：跳转事件中使用e.target.querySelector("a2")，当点击文字区域（a2元素本身）时，e.target就是a2，在它内部查找a2会返回null，导致window.location.href被设为undefined；点击列表项其他区域时，虽然能找到a2，但事件冲突仍会导致跳转异常。

修复步骤 #

1. 移除重复的列表项展开事件 #

删除给.dropdown-container-var ul li绑定的展开代码，只保留容器级别的展开事件，避免事件叠加冲突。

2. 修正跳转事件的DOM查询逻辑 #

跳转事件中不再依赖e.target，直接通过当前绑定的listItem（即列表项本身）查找内部的a2元素，确保无论点击列表项的哪个区域，都能正确获取链接地址。同时添加e.stopPropagation()阻止事件冒泡，避免触发容器的展开逻辑。

3. 修正HTML结构错误（可选但推荐） #

原HTML中错误地将<optgroup>放在<ul>内部，不符合HTML规范，建议用带样式的列表项替代模拟分组标题，避免潜在的DOM解析问题。

修改后的完整代码 #

JavaScript #

document.querySelectorAll(".dropdown-container-var").forEach(d => {
  d.addEventListener("click", e => {
    const dropdown = e.target.closest(".dropdown-container-var").querySelector("ul")
    if(dropdown) {
      dropdown.style.display = "block"
      _ElementBlur(e.target, () => {
        dropdown.style.display = "none"
      })
    }
  })
})

document.querySelectorAll(".dropdown-container-var ul li").forEach(listItem => {
  listItem.addEventListener("click", e => {
    e.stopPropagation();
    const link = listItem.querySelector("a2");
    if(link) {
      window.location.href = link.href;
    }
  })
})

// Functions for getting a 'blur' event on an element
const _ElementBlur = (el, f = false) => {
  const ac = new AbortController()
  document.body.addEventListener("click", _CheckBlur(el, f, ac), { signal: ac.signal })
}

const _CheckBlur = (el, f = false, ac) => {
  return e => {
    if(!document.elementsFromPoint(e.clientX, e.clientY).filter(efp => efp == el).length || !document.elementsFromPoint(e.clientX, e.clientY).length) {
      if(f && typeof(f) == "function") f()
      ac.abort()
    }
  }
}

HTML（修正分组结构） #

<div class="dropdown-container-var">
  <p2><a3 href="#">Surface and Precipitation</a3></p2>
  <ul class="dropdown-list-var">
    <li class="optgroup-title">Surface</li>
    <li><a2 href="dummylink.html">2m Temperature</a2></li>
    <li><a2 href="#">2m Dewpoint</a2></li>
    <li><a2 href="#">Mean Sea Level Pressure</a2></li>
    <li><a2 href="#">10m Wind</a2></li>
    <li class="optgroup-title">Precipitation</li>
    <li><a2 href="#">6-hr Precipitation Type/Rate</a2></li>
    <li><a2 href="#">Categorical Precipitation Type</a2></li>
    <li><a2 href="#">6-hr Precipitation</a2></li>
    <li><a2 href="#">24-hr Precipitation</a2></li>
    <li><a2 href="#">Total Precipitation</a2></li>
    <li class="optgroup-title">Winter</li>
    <li><a2 href="#">Total Snowfall</a2></li>
  </ul>
</div>
<div class="dropdown-container-var">
  <p2><a3 href="#">Upper-Air: Dynamics</a3></p2>
  <ul class="dropdown-list-var">
    <li class="optgroup-title">Vorticity</li>
    <li><a2 href="#">500 hPa Height,Wind,Vorticity</a2></li>
    <li><a2 href="#">700 hPa Height,Wind,Vorticity</a2></li>
    <li><a2 href="#">850 hPa Height,Wind,Vorticity</a2></li>
    <li class="optgroup-title">Lift</li>
    <li><a2 href="#">700 hPa Frontogenesis/Temperature Advection</a2></li>
    <li><a2 href="#">700 hPa Omega</a2></li>
    <li><a2 href="#">850 hPa Frontogenesis/Temperature Advection</a2></li>
    <li><a2 href="#">850 hPa Omegan</a2></li>
  </ul>
</div>
<div class="dropdown-container-var">
  <p2><a3 href="#">Upper-Air: Temperature,Wind</a3></p2>
  <ul class="dropdown-list-var">
    <li class="optgroup-title">Temperature</li>
    <li><a2 href="#">700 hPa Temperature, Height, Wind</a2></li>
    <li><a2 href="#">850 hPa Temperature, Height, Wind</a2></li>
    <li><a2 href="#">925 hPa Temperature, Height, Wind</a2></li>
    <li class="optgroup-title">Wind</li>
    <li><a2 href="#">250 hPa Height, Wind</a2></li>
    <li><a2 href="#">850 hPa Height, Wind</a2></li>
    <li class="optgroup-title">Anomaly</li>
    <li><a2 href="#">500 hPa Height Anomaly</a2></li>
  </ul>
</div>

CSS（新增分组标题样式） #

a3 {
  color: white;
  text-decoration: none;
  transition: background-color 0.2s;
}

a2 {
  color: black;
  text-decoration: none;
  transition: background-color 0.2s;
}

.dropdown-container-var {
  position: relative;
  background-color: #333;
  color: white;
  text-decoration: none;
  width: 600px;
  text-align: center;
  transition: background-color 0.2s;
  cursor: pointer;
}

.dropdown-container-var:hover {
  background-color: #525252;
  transition: background-color 0.2s;
}

.dropdown-list-var {
  position: relative;
  display: none;
  list-style-type: none;
  padding: 0;
  left: 0;
  transition: border 0.2s;
  background-color: #b0b0b0;
  color: black;
  text-decoration: none;
  width: 600px;
  text-align: center;
  transition: background-color 0.2s;
  cursor: pointer;
}

.dropdown-list-var li:hover {
  background-color: #04AA6D;
  transition: background-color 0.2s;
}

.dropdown-list-var li {
  color: black;
  text-align: center;
  transition: background-color 0.2s;
}

/* 分组标题样式 */
.dropdown-list-var .optgroup-title {
  font-weight: bold;
  color: black;
  width: 520px;
  cursor: default;
  background-color: #909090;
}

p2 {
  margin: 0;
}

.dropdown-list-var {
  margin: 0;
}

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