菜单未关闭

Question

我正在创建一个菜单，该菜单应该可以通过 508 合规性访问网络。 问题是当我到达最后一个菜单项时，菜单不会在键盘 TAB 按钮时关闭。

另一个问题是我需要能够在单击 ESC 键时找到关闭菜单的方法

示例在这里：jsfiddle.net/dvLden/Ltz7nmdb/1/

Answer 1

你唯一需要改变的是：

/* CSS */

.navbar > .navbar-item:hover > .navbar-sub,
.navbar > .navbar-item a:focus ~ .navbar-sub {
    display: block;
}

这是完整的工作代码（没有 jQuery）：

 /* CSS */ body { margin: 10px; } .navbar, .navbar .navbar-sub { list-style: none; margin: 0; padding: 0; } .navbar > .navbar-item { float: left; } .navbar > .navbar-item:last-child { margin-right: 0; } .navbar > .navbar-item a { text-decoration: none; } .navbar > .navbar-item > a { background-color: #999; padding: 10px 20px; color: #696969; display: block; } .navbar > .navbar-item > a:hover, .navbar > .navbar-item > a:focus, .navbar > .navbar-item.active > a { background-color: #ccc; } .navbar .navbar-sub { display: none; } .navbar .navbar-sub > .navbar-sub-item > a { color: #ccc; display: block; padding: 5px 10px; text-align: center; background-color: #696969; } .navbar .navbar-item.active .navbar-sub-item > a:hover, .navbar .navbar-item.active .navbar-sub-item > a:focus { background-color: #999; } /* That keep it open when "hover" and "focus" */ .navbar > .navbar-item:hover > .navbar-sub, .navbar > .navbar-item a:focus ~ .navbar-sub { display: block; }

 <!-- HTML --> <ul class="navbar"> <li class="navbar-item"> <a href="javascript:;">Parent Link</a> <ul class="navbar-sub"> <li class="navbar-sub-item"> <a href="#url_redirect">One</a> </li> <li class="navbar-sub-item"> <a href="#url_redirect">Two</a> </li> <li class="navbar-sub-item"> <a href="#url_redirect">Three</a> </li> </ul> </li> <li class="navbar-item"> <a href="javascript:;">Parent Link</a> <ul class="navbar-sub"> <li class="navbar-sub-item"> <a href="#url_redirect">One</a> </li> <li class="navbar-sub-item"> <a href="#url_redirect">Two</a> </li> <li class="navbar-sub-item"> <a href="#url_redirect">Three</a> </li> </ul> </li> <li class="navbar-item"> <a href="javascript:;">Parent Link</a> <ul class="navbar-sub"> <li class="navbar-sub-item"> <a href="#url_redirect">One</a> </li> <li class="navbar-sub-item"> <a href="#url_redirect">Two</a> </li> <li class="navbar-sub-item"> <a href="#url_redirect">Three</a> </li> </ul> </li> <li class="navbar-item"> <a href="javascript:;">Parent Link</a> <ul class="navbar-sub"> <li class="navbar-sub-item"> <a href="#url_redirect">One</a> </li> <li class="navbar-sub-item"> <a href="#url_redirect">Two</a> </li> <li class="navbar-sub-item"> <a href="#url_redirect">Three</a> </li> </ul> </li> </ul>