javascript - 当焦点离开 div 中的所有子链接时，触发事件

Question

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

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

显然我的 focusout 函数不能正常工作，但我不确定如何正确地做到这一点。

有什么想法吗？

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 中使用hash # 以确保页面不会跳转。我已将 span 添加到 anchor 标记，以便您在 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 部分，我确定您希望保留鼠标功能。在这种情况下，我们可以使用 focusin mouseenter 和 focusout mouseleave，正如 Pomax 之前建议的那样。我使用的技巧是捕获事件类型以查看我们使用的是键盘还是鼠标。两个事件绑定(bind)的行为略有不同，从而解决了这个特定问题。 jQuery 对象的 index() 可以帮助确定您是在子菜单还是菜单项上。当找不到索引或索引为 -1 时执行不同操作的简单技巧。

我还没有做的是检查它是否与跨浏览器兼容。同样在 javascript 部分，我相信有些事件被触发得太频繁了。在这种情况下使用委托(delegate) on() 可能不是一个好主意，除非您的列表项是动态添加到页面的。

希望对您有所帮助，祝您微调好运!

演示 http://jsfiddle.net/tive/vkQ3v/