右键单击

Question

我已在脚本中编码，当用户按Tab键时，菜单被激活，并通过按Tab键在导航栏中的所有列表和下拉列表中移动。

现在我想添加另一个脚本，我想使用右箭头键和左箭头键来浏览菜单。

例如。我按下Tab键在菜单项的下拉列表中（脚本按Tab键按下）。现在，当我按下右箭头键时，它不应该转移到下拉列表中的下一个项目，而是我想关闭当前下拉列表并打开导航栏中的下一个菜单项。 即说菜单项是： 入户（主）

- 信息（主）

- 关于我们（下拉信息列表）

-Events（下拉信息列表）

-HandsOut（信息下拉列表）

-Students（主）

现在说我在“信息”选项卡的下拉列表中的“事件”。现在如果我点击右箭头键，下拉列表将关闭，如果我点击右箭头两次，我将转移到学生（主要）。这就是我要找的。

这是我的尝试：

jQuery("#check li").keydown(function(e) {
        if(e.keyCode == 37) { 
            //left
            alert('left arrow pressed!');
        }else if(e.keyCode == 39) { 
            // right
            var n= jQuery(this).attr('class');
            //alert(n);

            if(n == 'uk-parent uk-open'){
                var count= jQuery(this).index();
                //alert(count);
                var count_new= count +1;
                jQuery('.uk-parent').removeClass("uk-open");
                jQuery(".uk-parent li").eq(count_new).addClass("uk-open");
            }
            //var m=jQuery(".uk-parent .uk-open").closest('li').next().find('li .uk-parent').addClass('uk-open');
        }

});

HTML：

<li class="uk-parent" data-uk-dropdown="{'preventflip':'y','remaintime':400}" aria-haspopup="true" aria-expanded="false" tabindex="2">
<a href="/information">Information</a>

<div class="uk-dropdown uk-dropdown-navbar uk-dropdown-width-1 uk-dropdown-bottom" style="min-width: 250px; max-width: 250px; width: 250px; top: 100px; left: 0px;" aria-hidden="true" tabindex="">

<div class="uk-grid uk-dropdown-grid">
<div class="uk-width-1-1">
<ul class="uk-nav uk-nav-navbar">
<li tabindex="3">

<a href="/information/about-us">About Us</a>
</li>
<li tabindex="4">
<a href="/information/events-calendar">Events Calendar</a>
</li>
<li tabindex="5">
<a href="/document-library-tree-view">Handouts, Forms, &amp; Flyers</a>
</li>
</ul>
</div>
</div>
</div>
</li>

在此脚本中，＃check是主导航栏的id，class = uk-open是用于打开菜单项下拉列表的类。 uk-parent是主菜单项的类。