如何解决我想使用Tab键浏览子菜单
我有一个菜单,并且此菜单中有子菜单。 我可以使用点击功能和CSS打开和隐藏子菜单。 但是我无法使用Tab键打开子菜单。 我希望能够使用Tab键依次浏览菜单。 当我专注于上方菜单时,子菜单应该处于活动状态,并且我应该能够使用Tab键在其中进行导航。 当使用Tab或Shift + Tab专注于另一个菜单时,子菜单应该被隐藏。
JSFiddle:https://jsfiddle.net/pu650xtn/3/
HTML:
<ul>
<li>
<a href="#">Home</a>
</li>
<li class="has-sub-menu">
<a href="#">Portfolio</a>
<ul class="sub-menu">
<li><a href="#">Photo</a></li>
<li><a href="#">Draw</a></li>
</ul>
</li>
<li class="has-sub-menu">
<a href="#">About</a>
<ul class="sub-menu">
<li><a href="#">Who i am</a></li>
<li><a href="#">CV</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
CSS:
ul{
list-style: none;
font-size: 20px;
line-height: 1.75em;
}
a{
color: #blue
display: inline-block;
}
a:focus{
outline: 1px dotted red !important;
}
a:visited{
color: blue;
}
.has-sub-menu ul.sub-menu{
max-height: 0;
overflow: hidden;
}
.open-sub-menu.has-sub-menu ul.sub-menu{
max-height: 200px;
overflow: visible;
}
JS:
$(function() {
$('.has-sub-menu > a').on("click",function() {
if ( $(this).parent().hasClass("open-sub-menu") ) {
$(this).parent().removeClass("open-sub-menu");
}
else {
$(this).parent().addClass("open-sub-menu");
}
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。