Question

我有这个可访问的下拉菜单。用户可以浏览导航链接，也可以像常规菜单一样将鼠标悬停在链接上。

我遇到的问题是，当用户尝试通过使用shift和Tab键浏览菜单链接时。这无法正常工作。

任何人都可以通过使shift +选项卡起作用来帮助我，以便用户可以回头浏览导航中的链接以使此菜单更易于访问吗？

$('#toggleMenu').on('click', function() {

    if ( $(this).hasClass('js-open') ) {

        $('#nav > ul > li:not(#toggleMenu)').removeClass('js-showElement');
        $(this).removeClass('js-open');

        $(this).attr('aria-expanded', false);

    } else {

        $('#nav > ul > li:not(#toggleMenu)').addClass('js-showElement');
        $(this).addClass('js-open');

        $(this).attr('aria-expanded', true);

    }

    return false; 
})

// Add plus mark to li that have a sub menu
$('li:has("ul") > a').append('<span class="plusMark">+</span>');




// sub menu
// ------------------------

// When interacting with a li that has a sub menu
$('li:has("ul")').on('mouseover keyup click mouseleave', function(e) {

    console.log("test")

    // If either -
        // tabbing into the li that has a sub menu
        // hovering over the li that has a sub menu
    if ( e.keyCode === 9 | e.type === 'mouseover' ) {

        // Show sub menu
        $(this).children('ul').removeClass('js-hideElement');
        $(this).children('ul').addClass('js-showElement');
    }

    // If mouse leaves li that has sub menu
    if ( e.type === 'mouseleave' ) {

        // hide sub menu
        $(this).children('ul').removeClass('js-showElement');
        $(this).children('ul').addClass('js-hideElement');
    }


    // If clicking on li that has a sub menu
    if ( e.type === 'click' ) {

        // If sub menu is already open
        if ( $(this).children('a').hasClass('js-openSubMenu') ) {

            // remove Open class
            $(this).children('a').removeClass('js-openSubMenu');

            // Hide sub menu
            $(this).children('ul').removeClass('js-showElement');
            $(this).children('ul').addClass('js-hideElement');


        // If sub menu is closed
        } else {

            // add Open class
            $(this).children('a').addClass('js-openSubMenu');

            // Show sub menu
            $(this).children('ul').removeClass('js-hideElement');
            $(this).children('ul').addClass('js-showElement');

        }

    } // end click event

});


// Tabbing through Levels of sub menu
// ------------------------

// If key is pressed while on the last link in a sub menu
$('li > ul > li:last-child > a').on('keydown', function(e) {


    // If tabbing out of the last link in a sub menu AND not tabbing into another sub menu
    if ( (e.keyCode == 9) && $(this).parent('li').children('ul').length == 0 ) {

            // Close this sub menu
            $(this).parent('li').parent('ul').removeClass('js-showElement');
            $(this).parent('li').parent('ul').addClass('js-hideElement');


        // If tabbing out of a third level sub menu and there are no other links in the parent (level 2) sub menu
        if ( $(this).parent('li').parent('ul').parent('li').parent('ul').parent('li').children('ul').length > 0 
             && $(this).parent('li').parent('ul').parent('li').is(':last-child') ) {

                // Close the parent sub menu (level 2) as well
                $(this).parent('li').parent('ul').parent('li').parent('ul').removeClass('js-showElement');
                $(this).parent('li').parent('ul').parent('li').parent('ul').addClass('js-hideElement');
        }

    }

})

这是一个有效的演示-http://jsfiddle.net/xpvt214o/774760/

使用jQuery的可访问下拉菜单

0 个答案: