我想使用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 (将#修改为@）