Question

我有一个侧边栏div和一个内容div布局。我正在尝试使箭头键可导航。

边栏div

侧边栏div具有垂直堆叠菜单，因此它应该能够接受向上箭头和向下箭头事件以在每个菜单链接之间移动并相应地加载内容div中的内容。向右箭头应导航到内容div第一个元素。

内容div

内容div是一个flex容器，它将图像缩略图加载到两行中。箭头键应该能够在这些之间导航。如果当前焦点位于内容div的第一个元素上，则左箭头键应再次将焦点移动到侧边栏div。

我现在在sidebar.js中有这个代码 -

      myClass.renderUI = function(data) {
            var sidebar = $('#sidebar-menu');
            html = template(data);
            sidebar.append(html);

            var arr = sidebar.find('li');
            for (var i = 0; i < arr.length; i++) {
                menu_rows.push($(arr[i]));
            }
            $('#sidebar-menu').find('li')[0].focus();
            $("#sidebar-menu").find('li:first').addClass('active')
            $("#movie-list").find('li:first').addClass('movie-active')
            $('#navbar').find('li').each(function(item) {
                $(item).keydown(function(e) {
                    handleKeyEvents(e, this);
                }); 
            })
        };

           function handleKeyEvents(e, currentElem) {
                switch(e.which) {
                    case 37:
                    break;

                    case 38:
                    makeMenuActive(currentElem);
                    break;

                    case 39:
                    break;

                    case 40:
                    makeMenuActive(currentElem);
                    break;

                    default:
                    return;
                }
                e.preventDefault();
            }

            function makeMenuActive(currentElem) {
                var url = currentElem.nextElementSibling.dataset.url;
                $('.active').removeClass('active').next('li').addClass('active');
                window.location.hash = url;
            }

我现在可以更改侧栏上菜单链接之间的焦点，而keydown事件仅在从第一个移动到第二个时才有效。有没有办法在所有li元素上绑定keydown事件（这是低效的）。我们不能使用事件委托并在父div上添加keydown事件吗？

另外，如何处理侧边栏div和内容div之间的箭头键导航？

提前致谢。

Answer 1

是的，代表团是要走的路。将侦听器附加到文档对象并检查焦点元素：

$(document).keydown(function (e) {
    if (e.which === 38) {
        if ($(':focus').index() === 0) {
            // checks if focused item is first child of parent
        }
    }
});

<强>更新

您的图片需要使用锚链接标记，因为<li>元素不会获得焦点伪类。见jsfiddle：

https://jsfiddle.net/91ahhmwm/1/

两个div和div子元素之间的键盘箭头导航

1 个答案: