I'm creating a jQuery-powered, WAI-ARIA tree menu for a site that doesn't have any server-side capabilities. Because of this, my only way of changing the menu dynamically is to check the current URL and compare it against the current file. For a match, I need to do all of these things:
- Add a class of "current" to the <li>element that holds the<a>element that matches the current page's URL
- Add a class of "current" to the <li>element that holds the<ul>element that holds the<li>element that holds the<a>element that matches the current page's URL
- Set the aria-expandedattribute totrueon the<li>element targeted in number 2 above
- Set the tabindexattribute to0on the child<a>element of the<li>element targeted in number 2 above (NOT the<a>that is actually the current page)
Here's what the resulting HTML should look like (if "owls.html" is the current page):
<nav id="nav-sub">
 <ul role="tree">
  <li role="treeitem" class="tree-parent current" aria-expanded="true"><a href="" tabindex="0">Birds</a>
开发者_StackOverflow    <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>
I've gotten this bit of jQuery to do the trick for items 1 through 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");
});
However, I'm a JavaScript/jQuery newbie, so I'm not sure if this is the best or most efficient way to do what I want. If anyone can suggest a better way to approach it, I'd appreciate it!
But I don't know how to achieve item 4, adding the tabindex value to the first-level <a> element, because it's not actually a parent/ancestor of the current page's <a> element. What can I add to my script to target this <a> element and change its tabindex value from -1 to 0?
var $treeParent = [current <a> element].closest('.tree-parent');
$('> a', $treeParent).attr('tabindex', 0);
I'd probably use
$("#nav-sub li a[href='" + pathname  + "']").closest('.tree-parent').next('a').attr('tabindex','0');
Also, I'd probably set a variable to $("#nav-sub li a[href='" + pathname  + "']") so I don't have to keep traversing the tree to get it. Possibly the same with the tree-parent if I'm using it more than once.
I haven't really tested that - but something like that should get what you want.
 
         
                                         
                                         
                                         
                                        ![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif) 
                                         
                                         
                                         
                                         加载中,请稍侯......
 加载中,请稍侯......
      
精彩评论