jQuery使用選項卡瀏覽下拉菜單鏈接（鍵盤可訪問性）

Question

我有一個css菜單，希望通過鍵盤交互進行訪問。 我希望能夠通過包括子菜單鏈接的每個鏈接進行制表。

如果下拉菜單焦點移至下一個父鏈接下拉菜單，則上一個下拉菜單應隱藏。

更新小提琴

的HTML

<ul>
    <li class="custom-MainMenu-TopNav-li">
        <div>
            <span><a href="#">Parent link 1</a></span>
            <div>
                <ul class="custom-MainMenu-SubNav-dropdown">
                   <li><a href="#">Sub Link</a></li>
                   <li><a href="#">Sub Link</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li class="custom-MainMenu-TopNav-li">
        <div>
            <span>Parent link 2</span>
            <div>
                <ul class="custom-MainMenu-SubNav-dropdown">
                   <li><a href="#">Sub Link</a></li>
                   <li><a href="#">Sub Link</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

的JavaScript

accessibleDropdown();
    function accessibleDropdown(){

        jQuery('.custom-MainMenu-TopNav-li a').each(function(){
            jQuery(this).focus(function(){
                jQuery(this).addClass('focused');
                var menuParent = jQuery(this).parent().next().find('ul');
                jQuery(menuParent).css('display','block');
            });

            jQuery(this).blur(function(){
                jQuery(this).removeClass('focused');
            });
        });
    } 

Answer 1

我不確定您期望得到什么結果以及需要什么結果，但是希望這會對您有所幫助。

由於命名約定和方法，我不得不重做您的示例，但是我想這就是您想要的...

這是一個演示，以防萬一... JSFiddle

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

的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.active > .navbar-sub {
    display: block;
}

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

jQuery的

$('.navbar').on('mouseenter focusin', '.navbar-item > a', function () {
    $(this)
        .parent('.navbar-item')
        .addClass('active')
        .siblings('.navbar-item')
        .removeClass('active')
});

Answer 2

在這里你去，簡單的jQuery :)

 // display drop down box when mouse is over $(".custom-MainMenu-TopNav-li a").mouseover(function(){ $(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "block"); }); // hide drop down box when mouse leaves $(".custom-MainMenu-TopNav-li a").mouseleave(function(){ $(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "none"); }); 

當鼠標懸停在/離開父div時，這基本上顯示/隱藏了每個下拉菜單。

我認為集中顯示dropbown菜單不是一個好主意，因為我相信您只能專注於某些元素（例如輸入）。

希望這可以幫助！