Question

我正在努力让仅限键盘的用户浏览我的菜单。当用户点击链接时，会打开一个显示菜单的面板。用户可以精确地浏览链接，但是当用户到达菜单的末尾并且焦点在下一个元素上时，前一个菜单将关闭。

参见示例：http://codepen.io/AdamWills/pen/Ejstd

显然我的聚焦功能无法正常工作，但我不确定如何正确执行此操作。

有什么想法吗？

HTML：

<div>
  <p><a class="open" href="#">Open menu 1</a></p>
  <div class="panel hidden">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
  </div>
</div>

<div>
  <p><a class="open" href="#">Open menu 2</a></p>
    <div class="panel hidden">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </div>
 </div>

<p><a href="#">Next Link</a></p>

JS：

$('.open').on('click', function() {
  $(this).parent().parent().find('.panel').toggleClass('hidden');
});

$('.panel').on('focusout',function() {
  $(this).addClass('hidden');
});

编辑：这不是我的制作HTML - 只是我正在使用的基本结构的一个简单示例。

Answer 1

我注意到一些问题，我们会检查您的代码。有些人可能会注意到，其他人需要对你进行一些研究。

HTML语义
~~SEO标题~~
CSS

要解决您的问题，请使用适当的标题属性来确保可用性，并确保您的CSS已标记为捕获鼠标事件以保持此功能。

<强> HTML

<ul>
    <li class="open">
        <a href="javascript:void(0);" title="Open menu 1"><span>Open menu 1</span></a>
        <ul class="panel hidden">
            <li><a href="#">Menu 1 Link 1</a></li>
            <li><a href="#">Menu 1 Link 2</a></li>
        </ul>
    </li>
    <li class="open">
        <a href="javascript:void(0);" title="Open menu 2"><span>Open menu 2</span></a>
        <ul class="panel hidden">
            <li><a href="#">Menu 2 Link 1</a></li>
            <li><a href="#">Menu 2 Link 2</a></li>
        </ul>
    </li>
    <li class="open">
        <a href="javascript:void(0);" title="Open menu 3"><span>Open menu 3</span></a>
        <ul class="panel hidden">
            <li><a href="#">Menu 3 Link 1</a></li>
            <li><a href="#">Menu 3 Link 2</a></li>
        </ul>
    </li>
</ul>

除了子菜单的嵌套之外，您还可以使用HTML nav元素。不要在#中使用哈希href来确保页面不会跳起来。我已经为锚标签添加了跨度，因此您在CSS中有更多选项。 ~~使用标题属性来实现可用性（屏幕阅读器，SEO，...）~~。

<强> CSS

ul { display: block; }
ul li { background-color: grey; display: block; float: left; position: relative; }
ul li ul { background-color: darkgrey; display: block; position: absolute; top: 3.2em; left: 0; margin: 0; padding: 0; }
ul li ul li { display: block; }

a { color: white; display: block; padding: 1em; }
a:focus,
a:hover{ color: red; }

我已经稍微更改了标记，以确保在父元素和子元素上捕获悬停事件。如果两者之间存在空间，则会触发额外的mouseleave个事件。在那种情况下，它不起作用。因此，语义HTML可以帮助将position:relative用于父菜单，并使用position: absolute用于子项。另请注意，我添加了a:hover以保持类似行为。

<强> JAVASCRIPT

$('ul').on('focusin mouseenter', 'li', function() {
    var el = $(this),
        panels = $('.panel'),
        menu = el.parents('.open'),
        menuId = menu.index(),
        sub = el.find('ul');

    // conditionally hide the submenu when using focus
    if (menuId < 0){
        panels.addClass('hidden'); // use a filter function to improve it
    }

    sub.removeClass('hidden');
});

$('ul').on('focusout mouseleave', 'li', function(ev){
    var el = $(this),
        itemId = el.index(),
        menu = el.parents('.open'),
        menuId = menu.index(),
        sub = el.find('ul');

    // conditionally hide the submenu when using the mouse
    if (menuId < 0 && ev.type !== 'focusout'){
        sub.addClass('hidden');
    }
});

在JavaScript部分我确定你想保留鼠标功能。在这种情况下，我们可以使用之前Pomax建议的focusin mouseenter和focusout mouseleave。我使用的技巧是捕获事件类型以查看我们是使用键盘还是鼠标。两个事件绑定的行为都有所不同，因此可以解决这个特殊问题。 jQuery对象的index()可以帮助确定您是在子菜单还是菜单项上。无法找到索引时执行不同操作的简单方法，或者是-1。

检查是否与crossbrowser兼容。另外在javascript部分我认为有些事件经常被解雇。在这种情况下，除非您的列表项动态添加到页面中，否则使用委托on()可能不是一个好主意。

希望它有所帮助，祝你好运！

<强>样本 http://jsfiddle.net/tive/vkQ3v/

Answer 2

您可以为元素指定tabindex，以确保它们以正确的顺序被选中，而无需任何代码（相同的tabindex意味着以声明的顺序标记它们）。然后，您可以为每个人提供一个onfocus处理程序，它执行element.show()和一个onblur来实现element.hide()，并简单地将包装器保持为惰性包装器。这样，如果你的用户选中了元素，它会显示，它们会点击标签，浏览器会根据tabindex找到下一个tabbable元素，onblur会触发旧元素，onfocus会触发新元素。

也就是说，按钮已经有一个tabindex，但看看http://codepen.io/anon/pen/KesbI

当焦点将所有子链接保留在div中时，触发事件

2 个答案: