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

我有一个侧边栏分区和一个内容分区布局。我正在努力使它的箭头键导航

边栏分区

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

内容部

contentdiv是一个flex容器，它以两行的形式加载图像缩略图。箭头键应该能够在这些之间导航。如果当前焦点位于contentdiv的第一个元素上，则左箭头键应再次将焦点移动到边栏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和content div之间的箭头键导航

---

提前谢谢。

是的，授权是最好的选择。将侦听器附加到文档对象并检查聚焦元素：

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

更新

您的图像需要位于锚定链接标记中，因为元素没有获得焦点伪类。请参阅JSFIDLE：

---

这对侧边栏和content div之间的导航也有用吗？好的。我想我能让它工作。但是，我在为两个单独的div添加单独的keydown事件侦听器时遇到了问题。有点..但是，我有一个侧栏布局和一个内容div布局。如果将图像放在锚定标记中，应该可以工作。对于href属性，像在我的示例中一样使用它确实有效！我终于成功了：谢谢你的解决方案。