在無障礙網頁中使用TAB鍵操作Menu

在無障礙網頁中使用TAB鍵操作Menu

參考語法：

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

$('.navbar').on('mouseenter focusin', '.navbar-item > a', function (e) {

    $(this).parent('.navbar-item')
           .addClass('active')
           .siblings('.navbar-item')
           .removeClass('active')

});