根据当前 URL 将 aria-expanded 和 tabindex 值添加到父级

Question

我正在为一个没有任何服务器端功能的站点创建一个由 jQuery 驱动的 WAI-ARIA 树形菜单。因此，我动态更改菜单的唯一方法是检查当前 URL 并将其与当前文件进行比较。对于一场比赛，我需要做所有这些事情：

1. 向<li> 元素添加一个“current”类，该元素包含与当前页面的URL 匹配的<a> 元素
2. 向包含<ul> 元素的<li> 元素添加一个“current”类，该元素包含与当前页面的URL 匹配的<a> 元素的<li> 元素
3. 在上面第 2 点所针对的 <li> 元素上将 aria-expanded 属性设置为 true
4. 将<a> 子元素上的tabindex 属性设置为0 上面第2 个目标中的<li> 元素（不是<a>，它实际上是当前页面）

生成的 HTML 应该如下所示（如果“owls.html”是当前页面）：

<nav id="nav-sub">
 <ul role="tree">
  <li role="treeitem" class="tree-parent current" aria-expanded="true"><a href="" tabindex="0">Birds</a>
    <ul role="group">
      <li role="treeitem"><a href="ducks.html">Ducks</a></li>
      <li role="treeitem"><a href="geese.html">Geese</a></li>
      <li role="treeitem" class="current"><a href="owls.html">Owls</a></li>
    </ul>
  </li>
  <li role="treeitem" class="tree-parent" aria-expanded="false"><a href="" tabindex="-1">Cats</a>
    <ul role="group">
      <li role="treeitem"><a href="lions.html">Lions</a></li>
      <li role="treeitem"><a href="tigers.html">Tigers</a></li>
    </ul>
  </li>
 </ul>
</nav>

我已经得到了一些 jQuery 来处理项目 1 到 3：

$(document).ready( function () {
  var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
  $("#nav-sub li a[href='" + pathname  + "']").parents(".tree-parent").attr('aria-expanded', 'true');
  $("#nav-sub li a[href='" + pathname  + "']").parents("li").addClass("current");
});

但是，我是 JavaScript/jQuery 新手，所以我不确定这是否是实现我想要的最好或最有效的方法。如果有人能提出更好的处理方法，我将不胜感激！

但是我不知道如何实现第4项，将tabindex值添加到第一级<a>元素，因为它实际上不是当前页面的<a>元素的父/祖先。我可以在脚本中添加什么来定位这个 <a> 元素并将其 tabindex 值从 -1 更改为 0？

Answer 1

var $treeParent = [current <a> element].closest('.tree-parent');
$('> a', $treeParent).attr('tabindex', 0);

Answer 2

我可能会使用

$("#nav-sub li a[href='" + pathname  + "']").closest('.tree-parent').next('a').attr('tabindex','0');

另外，我可能会将一个变量设置为$("#nav-sub li a[href='" + pathname + "']")，这样我就不必一直遍历树来获取它。如果我多次使用它，可能与树父级相同。

我还没有真正测试过——但类似的东西应该能得到你想要的。