重点拓展Nav项目

Question

我有一个问题，扩大侧导航。

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

但是，问题是，如果只有键盘的用户通过边导航选项卡进入上面的Art部分，或者下面的“研究生”列表中的一个部分，这些元素将不会扩展以显示他们当前已选项卡到哪个链接。例如：

如果我选择艺术部分，然后是平面设计选项卡，我无法看到我选择了什么，因为“艺术”仍然关闭。如果我选择“生物学学士学位(BS或BA)”，然后选择“医学前浓度”选项卡，我看不到我选择的内容。因为“学士”列表项目仍然关闭，所以我看不到选择了什么。如果我继续在研究生部分选项卡，我也看不到我有选项卡的哪个子项目。。

我将如何编码这一点，以便这些部分将展开，如果一个子元素已被标签到？

谢谢!

https://jsfiddle.net/eLsb50f3/

    /* 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...

Answer 1

您可以使用纯css通过使用:focus-within伪类来实现这一点。参见下面的示例。诚然，演示该方法很简单。选择“顶级页面A”，然后可以使用选项卡和shift选项卡导航。

​

.menu ul {
  display: none;
}

.menu:focus-within ul {
  display: list-item;
}

<ul>
    <li class="menu">
        <a href="#" class="menu_link" tabindex="0">Top Level Page A</a>
        <ul class="submenu">
            <li><a href="#" class="menu_link" tabindex="0">Sub Page 1</a></li>
            <li><a href="#" class="menu_link" tabindex="0">Sub Page 2</a></li>
            <li><a href="#" class="menu_link" tabindex="0">Sub Page 3</a></li>
        </ul>
    </li>
    <li class="menu">
        <a href="#" class="menu_link" tabindex="0">Top Level Page B</a>
        <ul class="submenu">
            <li><a href="#" class="menu_link" tabindex="0">Sub Page 1</a></li>
            <li><a href="#" class="menu_link" tabindex="0">Sub Page 2</a></li>
            <li><a href="#" class="menu_link" tabindex="0">Sub Page 3</a></li>
        </ul>
    </li>
    <li class="menu">
        <a href="#" class="menu_link" tabindex="0">Top Level Page C</a>
        <ul class="submenu">
            <li><a href="#" class="menu_link" tabindex="0">Sub Page 1</a></li>
            <li><a href="#" class="menu_link" tabindex="0">Sub Page 2</a></li>
            <li><a href="#" class="menu_link" tabindex="0">Sub Page 3</a></li>
        </ul>
    </li>
</ul>

​