Question

我正在修改与WCAG兼容的现有下拉菜单，但需要更改功能，以便通过悬停而不是单击来工作。这是代码：

$(document).ready(function() {

  $('.has-submenu').each(function (i, event) {
    var $event = $(event);
    var name = $event.text();
    $event.addClass('open-menu')
      .attr('aria-expanded', 'false')
      .attr('aria-label', 'Open ' + name + ' menu');
  });

  $('.open-menu').on('click', function (event) {
    event.preventDefault();
    var $target = $(event.target);
    if ($target.attr('aria-expanded') == 'true') {
      $target.attr('aria-expanded', 'false');
      return;
    }
    var parentMenus = $target.parentsUntil('.nav-items').filter('ul').prev('a.open-menu');
    $('.nav-items a.open-menu[aria-expanded=true]').not(parentMenus).attr('aria-expanded', 'false');
    $target.attr('aria-expanded', 'true');
  });
});

您可以看到脚本在这里工作：http://jsfiddle.net/58wtuc9x/

任何帮助将不胜感激！

Answer 1

尝试更改...

$('.open-menu').on('click'

致...

$('.open-menu').on('click mouseenter'

这样，如果您单击它或您的鼠标进入元素，它将执行。或者，如果您只想要悬停效果，请取消点击。

Answer 2

您可能只需要附加一个hover事件处理程序，如下所示。

$('.open-menu').hover(function (event) {
    event.preventDefault();
    var $target = $(event.target);
    if ($target.attr('aria-expanded') == 'true') {
      $target.attr('aria-expanded', 'false');
      return;
    }
    var parentMenus = $target.parentsUntil('.nav-items').filter('ul').prev('a.open-menu');
    $('.nav-items a.open-menu[aria-expanded=true]').not(parentMenus).attr('aria-expanded', 'false');
    $target.attr('aria-expanded', 'true');
  });

更改。（单击）以将鼠标悬停在可访问的下拉菜单上

2 个答案: