Question

我已经搜索过，但找不到我的问题的解释。

我有一个包含三个项目的菜单，每个菜单都有子菜单，每个菜单有三个项目。我想通过按键打开活动菜单项的子菜单。

我能够在点击功能上使用$(this).parent().find('.submenu').show();实现此功能，但它不适用于keydown功能。如果我为相应的键执行$('.submenu').show();，则它可以正常工作，但所有子菜单都会显示。因此，如果有人能够解释我不理解的内容以及我应该做什么来制作按键上的当前子菜单，我将非常感激！

这是键的功能：

switch(e.keyCode)
    {       
        // left key 
        case arrow.left:

        break;

        // up key
        case arrow.up: //this works
            $('a:focus').closest('li').prev().find('a.option').focus();
        break;

        // right key
        case arrow.right:
            $('.submenu').show(); //this works but shows all the submenus
        break;

        // down key
        case arrow.down: //this works
            $('a:focus').closest('li').next().find('a.option').focus();
        break;
    }

这是有效的点击功能：

$('a').click(function() {

    this.focus();

    $(this).parent().find('.submenu').show(); 

});

这是我的代码的小提琴：fiddle

Answer 1

在您的切换中，您要告诉它显示所有.submenu个项目，而在您的点击中，您需要将其缩小到与所点击的项目相关的.submenu。您可以在switch语句中使用相同的方法，只打开相关a元素具有焦点的项目：

case arrow.right:
    $('a:focus').parent().children('.submenu').show();
    //...

jsfiddle

编辑：

要将焦点更改为子菜单项，只需抓住刚刚打开的子菜单中的第一项并设置焦点（）。

由于您一直在关注a元素，因此我保持相同，但您的sumbenues使用不同的结构（.option用于a元素，但是{{ 1}}用于.suboption元素等）

li

edited jsfiddle

Answer 2

试试这个：

case arrow.right:
                $('a:focus').next().show();

也

// hide submenu on default
    $('ul li ul').hide();
    $(document).off();
    $(document).keydown(function(e) {

        e.preventDefault();


        // declare variable for submenu
        var menu = $('ul');
        var submenu = $('ul li ul');

        // declare variables for the keys
        var keyCode = e.keyCode || e.which,
            arrow = {left: 37, up: 38, right: 39, down: 40};



        switch(e.keyCode)
        {       
            // left key 
            case arrow.left:

            break;

            // up key
            case arrow.up: //this works
                $('a:focus').closest('li').prev().find('a.option').focus();

            break;

            // right key
            case arrow.right:
                $('a:focus').next().show(); //this works but shows all the submenus

            break;

            // down key
            case arrow.down: //this works
                $('a:focus').closest('li').next().find('a.option').focus();
            break;
        }
   console.log(123,$(':focus'));
    });

    $('a').click(function() {

        this.focus();

        $(this).parent().find('.submenu').toggle(); 

    });

jsfiddle

show action在按键上不起作用，但适用于单击功能

2 个答案: