Javascript 扩展焦点上的导航项目

我在扩展侧导航时遇到问题

在下面的小提琴中，你可以看到侧面导航在物理科学学士页面上的样子。此页面是本科生、课程和学位以及科学项目的子元素，并标有“当前页面”类

然而，问题是，如果一个只使用键盘的用户在侧边导航中使用tab键，并转到上面的艺术部分，或下面“毕业生”列表下的部分，这些元素将不会展开以显示他们当前使用tab键的链接。例如：

• 如果我先切换到“艺术”部分，然后切换到“平面设计”，我就看不到所选内容，因为“艺术”仍处于关闭状态
• 如果我先点击“生物学学士学位（BS或BA）”，然后点击“药前浓度”，我看不到我选择了什么，因为“学士学位”列表项仍然关闭
• 如果我继续切换到研究生部分，我也看不到我在那里切换到了哪个子项

我该如何编写代码，以便在子元素被选项卡化时这些部分将展开

谢谢

---

您可以通过使用伪类中的

：focus来使用纯css实现这一点。
请参见下面的示例。诚然，演示这个方法很简单。
选择“顶级页面A”，然后可以使用tab和shift选项卡进行导航



.menu-ul{
显示：无；
}
.菜单：聚焦于ul{
显示：列表项；
}






















使用
.focus
而不是
。单击
上面的代码是sidenav的现有基本代码-出于某种原因，我无法在没有任何代码的情况下设置到JSFIDLE的链接。现在，在我试图做的事情的结尾有一些评论。。。
    /* Expanding Side Navigation  */
$(document).ready(function() {
  $('body').addClass('js');
  var $menu = $('#expanding-side-nav'),
    $toplink = $('#expanding-side-nav-top-link'),
    $menulink = $('.expanding-side-menu-link'),
    $menuTrigger = $('.has-subnav > a > .side-more-link');

  $menulink.click(function(e) {
    e.preventDefault();
    $menulink.toggleClass('active');

  });

  $menuTrigger.click(function(e) {
    e.preventDefault();
    var $this = $(this);
    $this.toggleClass('active').parent().next('ul').toggleClass('active');

  });


  $menulink.click(function() {
    $('html, body').animate({
      scrollTop: $menu.offset().top
    }, 500);
  });

  $toplink.click(function() {
    $('html, body').animate({
      scrollTop: $('body').offset().top
    }, 500);
  });

  /* setting the default states. */
  // first set an active class on all ULs that are the parent of the current page.
  $('.expanding-side-menu .current-page').parents('nav ul').addClass('active');
  // then expand the .side-more-link of all currently expanded ULs in the nav.
  $('.expanding-side-menu .current-page').parents('nav ul.active').prev().find('.side-more-link').addClass('active');
  // then make the chidren of the current node visible.
  $('.expanding-side-menu .current-page ~ ul').addClass('active');
  // and make the current node + sign a minus
  $('.expanding-side-menu .current-page .side-more-link').addClass('active');
});

//If user has tabbed to an LI that is under a UL that is not active,
//then we need to open the parent UL so that the user can see what
//they have tabbed to...