展开焦点上的导航项

Question

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

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

但是，问题在于，如果仅使用键盘的用户正在按 Tab 键浏览侧边导航并转到上面的"艺术"部分或下面"毕业生"列表下的某个部分，则这些元素将不会展开以显示他们当前已按选项卡访问的链接。例如：

• 如果我按 Tab 键转到"艺术"部分，然后按 Tab 转到"平面设计"，则看不到我选择的内容，因为"艺术"仍然关闭。
如果我按">
• 生物学学士学位(BS 或 BA("，然后按"医学预科浓度"，我看不到我选择的内容，因为"学士"列表项仍然关闭。
• 如果我继续按 Tab 键转到"研究生"部分，我也看不到我在那里按了 Tab 键转到哪个子项目。

我将如何对此进行编码，以便在子元素被选项卡化时扩展这些部分？

谢谢！

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

您可以使用:focus-within伪类来使用纯 css 执行此操作。 请参阅下面的示例。诚然，演示方法很简单。 选择"顶级页面 A"，然后您可以使用 tab 和 shift tab 进行导航。

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