使用jQuery .each()方法获取子菜单回车触发项的URL

需求：在level-2层级的子菜单中，按下回车键时，抓取并打开当前触发回车事件的列表项对应的URL。

现有代码 #

JS代码

var selector = $("li.has-submenu .level-2").has("ul#specific-id");
var anchor = $("#specific-id > li > a");
$(selector).keydown(function(e) {
  if (e.which === 13) {
    e.preventDefault();
    // iterate over all anchor tags
    anchor.each(function() {
      // do extra stuff only if this is the current iteration receiving the enter key press
      var sort = $(this).parent();
      if (index == sort.index()) {
        window.open(this.href);
      }
    })
  }
});

HTML代码

<ul class="menu level-1">
  <li>No Submenu</li>
  <li>No Submenu</li>
  <li class="has-submenu level-2">
    <a>I'm a Menu With Submenu</a>
    <ul id="specific-id">
      <li class="menuitem">
        <a href="#">List Items A</a>
      </li>
      <li class="menuitem">
        <a href="#">List Item B</a>
      </li>
      <li class="menuitem">
        <a href="#">List Item C</a>
      </li>
    </ul>
  </li>
  <li>No Submenu</li>
  <li>No Submenu</li>
  <li>No Submenu</li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

原代码问题 #

• 事件绑定到了父级的li.has-submenu .level-2元素，而非实际获得焦点的子菜单列表项，无法直接定位当前触发回车的元素
• 未定义变量index，导致索引匹配逻辑完全失效
• 遍历所有a标签的逻辑冗余，没必要循环判断每个元素

修正后的代码 #

调整后的HTML（给子菜单a标签添加tabindex确保可聚焦）

<ul class="menu level-1">
  <li>No Submenu</li>
  <li>No Submenu</li>
  <li class="has-submenu level-2">
    <a>I'm a Menu With Submenu</a>
    <ul id="specific-id">
      <li class="menuitem">
        <a href="#" tabindex="0">List Items A</a>
      </li>
      <li class="menuitem">
        <a href="#" tabindex="0">List Item B</a>
      </li>
      <li class="menuitem">
        <a href="#" tabindex="0">List Item C</a>
      </li>
    </ul>
  </li>
  <li>No Submenu</li>
  <li>No Submenu</li>
  <li>No Submenu</li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

修正后的JS代码

// 直接监听子菜单中所有a标签的回车事件
$("#specific-id > li > a").keydown(function(e) {
  if (e.which === 13) {
    e.preventDefault();
    // 直接获取当前触发事件的a标签的href并打开
    window.open(this.href);
  }
});

关键改动说明 #

• 把事件绑定目标从父级元素改为子菜单的<a>标签，直接监听每个可聚焦的链接元素的回车事件
• 移除冗余的遍历和索引判断逻辑，直接通过this获取当前触发事件的元素，拿到对应href打开
• 给子菜单的<a>标签添加tabindex="0"，确保这些链接可以通过键盘聚焦，支持回车触发操作

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