JS / JQuery 通过子导航（焦点功能）的按键循环没有按预期工作

Question

为了辅助功能，我需要在我的导航中具有扩展焦点功能。在焦点上子导航显示，如果按下或向上键 jquery 将在子导航中循环显示项目，同时保持焦点。我几乎已经确定了这一点，但是 jquery next() 没有按预期工作，而是跳过两个或有时只是随机顺序。

HTML :-

<nav class="nav nav--primary" role="navigation">

            <a href="/" title="Home" class="primary-nav-link parent active" data-position="1" tabindex="1">wasd</a>

           <div class="nav__dropdown">
                    <a class="primary-nav-link parent " tabindex="1">wasd</a>
                <span class="nav__expand"></span>
                <div class="nav__dropdown__content" aria-hidden="true">
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.1">wasd</a>
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.2">wasd</a>
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.3">wasd</a>
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.4">wasd</a>
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.5">wasd</a>
                </div>
            </div>

            <div class="nav__dropdown">
                    <a class="primary-nav-link parent " tabindex="1">wasd</a>
                <span class="nav__expand"></span>
                <div class="nav__dropdown__content" aria-hidden="true">
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.1">wasd</a>
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.2">wasd</a>
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.3">wasd</a>
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.4">wasd</a>
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.5">wasd</a>
                </div>
            </div>

             <div class="nav__dropdown">
                    <a class="primary-nav-link parent " tabindex="1">wasd</a>
                <span class="nav__expand"></span>
                <div class="nav__dropdown__content" aria-hidden="true">
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.1">wasd</a>
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.2">wasd</a>
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.3">wasd</a>
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.4">wasd</a>
                        <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.5">wasd</a>
                </div>
            </div>

</nav>

JS :-

   $(".parent").focus(function(){

    $(this).closest(".nav__dropdown").addClass("hover"); 
    $('.hover .nav__dropdown__content a').first().addClass('navSelected');

        $(document).keydown(function(e) {
            var selected = $('.navSelected');
            var sub = $('.hover .nav__dropdown__content a');


            if(e.which === 40){

                if(selected){
                    selected.removeClass('navSelected');
                    next = selected.next();
                        if(next.length > 0){
                            selected = next.addClass('navSelected');
                        }else{
                            selected = sub.eq(0).addClass('navSelected');
                        }
                }else{
                    selected = sub.eq(0).addClass('navSelected');
                }


            }else if(e.which === 38){
                if(selected){
                    selected.removeClass('navSelected');
                    next = selected.prev();
                    if(next.length > 0){
                selected = next.addClass('navSelected');
                    }else{
                        selected = sub.last().addClass('navSelected');
                    }
                }else{
                selected = sub.last().addClass('navSelected');
                }
            }
        });

}).blur(function(){     
    $(".nav__dropdown").removeClass("hover");
    $(document).removeClass("navSelected");
})

工作 js fiddle :-

https://jsfiddle.net/zpnfzevb/

Answer 1

绑定到 $(document) 的 keydown 事件导致了额外的循环，这意味着选择最终会出现在不同的地方。

事件现在绑定到 $('nav') 并且在模糊函数中未绑定，这已经删除了所有不需要的触发器并且现在按预期运行。

下面的最终 JS：-

  $(".parent").focus(function(){

    $(this).closest(".nav__dropdown").addClass("hover"); 
    $('.hover .nav__dropdown__content a').first().addClass('navSelected');

        $('nav').keydown(function(e) {
            var selected = $('.navSelected');
            var sub = $('.hover .nav__dropdown__content a');


            if(e.which === 40){

                if(selected){
                    selected.removeClass('navSelected');
                    next = selected.next();
                        if(next.length > 0){
                            selected = next.addClass('navSelected');
                        }else{
                            selected = sub.eq(0).addClass('navSelected');
                        }
                }


            }
            if(e.which === 38){
                if(selected){
                    selected.removeClass('navSelected');
                    next = selected.prev();
                        if(next.length > 0){
                            selected = next.addClass('navSelected');
                        }else{
                            selected = sub.last().addClass('navSelected');
                        }
                }
            }

            if(e.which === 13){
                if(selected){
                selected.trigger('click');
                }
            }

        })

  }).blur(function(){
  $('nav').unbind('keydown');
  $(".nav__dropdown").removeClass("hover");
  $(document).removeClass("navSelected");
  })

JS / JQuery 通过子导航（焦点功能）的按键循环没有按预期工作

JS / JQuery keydown cycle through sub nav (focus function) doesn't work as expected

javascript

jquery

accessibility

keydown

onfocus