需求：编写JS函数获取下拉菜单顶级H5对应值

别慌，这个需求其实很好实现，核心思路就是通过事件委托监听点击，再向上遍历DOM树找到对应的顶级H5元素——毕竟是大型下拉菜单，直接给每个选项绑事件太浪费性能了。

先假设你的下拉菜单DOM结构大概是这样（如果实际结构有出入，调整选择器就行）：

<div class="dropdown-container">
  <h5>System</h5>
  <ul class="main-menu">
    <li class="category">
      <span>Equipment</span>
      <ul class="sub-menu">
        <li>Power Tools</li> <!-- 就是点击这个选项 -->
      </ul>
    </li>
  </ul>
</div>

方案一：用事件委托 + closest 快速定位 #

这是最简洁高效的方式，适合结构规整的菜单：

// 给下拉菜单的最外层容器绑定点击事件（替换成你实际的容器选择器）
document.querySelector('.dropdown-container').addEventListener('click', function(e) {
  // 先判断点击的是不是「Power Tools」选项，trim()避免空格干扰匹配
  const clickedText = e.target.textContent.trim();
  if (clickedText === 'Power Tools') {
    // 向上找到最外层容器，再直接获取里面的H5元素
    const topLevelH5 = e.target.closest('.dropdown-container').querySelector('h5');
    const topLevelValue = topLevelH5.textContent.trim();
    
    console.log(topLevelValue); // 这里会输出「System」
    return topLevelValue; // 按需求返回这个值
  }
});

方案二：手动遍历DOM（适合结构复杂的情况） #

如果你的菜单层级嵌套特别乱，closest不好用，可以手动向上遍历直到找到H5：

// 封装一个函数，用来从点击元素向上找顶级H5
function getTopLevelTitle(element) {
  let currentEl = element;
  // 一直向上找，直到找到H5或者到DOM根节点
  while (currentEl) {
    if (currentEl.tagName === 'H5') {
      return currentEl.textContent.trim();
    }
    currentEl = currentEl.parentNode;
  }
  return null; // 没找到的话返回null做容错
}

// 事件委托部分
document.querySelector('.dropdown-container').addEventListener('click', function(e) {
  const clickedText = e.target.textContent.trim();
  if (clickedText === 'Power Tools') {
    const topLevelValue = getTopLevelTitle(e.target);
    console.log(topLevelValue); // 输出「System」
    return topLevelValue;
  }
});

几个注意点： #

• 如果「Power Tools」是被span或者其他标签包裹的，e.target可能不是选项本身，这时候可以用e.target.closest('li')先拿到选项元素，再判断文本
• 一定要确保容器选择器（比如.dropdown-container）和你的实际DOM结构匹配，不然事件监听不到
• 大型菜单用事件委托是最优解，只绑一次事件，不会因为选项多导致内存占用过高

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