Question

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

将一个“当前”类添加到<li>元素，该元素包含与当前页面的网址匹配的<a>元素
将一个“当前”类添加到<li>元素，该元素包含<ul>元素，该元素包含<li>元素，该元素包含与当前页面匹配的<a>元素URL
将aria-expanded属性设置为上面数字2中定位的true元素上的<li>
将上面第2号中定位的tabindex元素的子0元素的<a>属性设置为<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

我可能会用

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

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

我还没有真正测试过 - 但是这样的东西应该得到你想要的东西。

Answer 2

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

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

2 个答案: