Question

我有一个全宽下拉菜单，显示悬停或获得焦点时的所有子菜单（使键盘可访问）。这是一个经常看到的菜单，但是键盘可访问性我没有找到以模拟悬停行为的方式实现的示例（换句话说：扩展菜单）。

这是菜单的HTML：

<div id="menu">
    <div class="container">
      <ul class="row">
        <li class="first"><a href="link">Home</a></li>
        <li><a href="link">Projects</a>
          <ul class="inner">
             <li class="first"><a href="link">Project 1</a></li>
             <li class="last"><a href="link">Project 2</a></li>
          </ul>
        </li>
        <li class="last"><a href="link">Contact</a>
          <ul class="inner">
            <li class="first"><a href="link">Visit us</a></li>
            <li class="last"><a href="link">Email</a></li>
          </ul>
        </li>
     </ul>
  </div>
</div>

我一直在尝试各种各样的方法来使用Jquery（仍在学习Jquery），并且它可以部分工作。悬停功能有点发生，但仍有一些奇怪的事情发生。问题在于聚焦/模糊功能。我已经为模糊功能添加了一个超时，否则每次我选择到另一个链接时它都会触发。但是有了这个超时，模糊效果就不会再发生了。（菜单保持扩展）。

与其他解决方案不同的是，我希望悬停，焦点和模糊事件发生在#menu div上，而不是单个链接上。我希望它以这种方式工作，因为它是一个全宽度菜单，当您将鼠标悬停在菜单上时，您会立即看到所有子菜单。我发现在div中添加'tabindex = 0'可以使用焦点和模糊。因此我决定在Jquery中添加它。

我的Jquery看起来像这样：

$(document).ready(function() {

    /* dropdownmenu */
    $("#menu")
    .attr("tabindex",0)
    // HOVER
    .hover
    ( function () 
      {
       $(this).addClass('dropdown');
       $(this).animate({ height: '20em'});
      },
      //hover out
      function() 
      {
        $(this).animate(
            { height: '6em' }, 
            { complete: function() { $(this).removeClass('dropdown'); } }
        )
      }
    )
    // FOCUS
    .focus 
    ( function () 
      {
        $(this).addClass('dropdown');
        $(this).animate({height: '20em'});
      }

    )
    // BLUR
    .blur 
    ( function() 
      {
         setTimeout(function()
         {
        $(this).animate(
                    {height: '6em'}, 
                { complete: function() { $(this).removeClass('dropdown'); } }
            )
         },500);

      }
    );

我希望有人可以帮我一点，让这个Jquery变得更好。是不是很久了？为什么悬停功能表现奇怪，模糊功能根本不起作用？我应该采取另一种方式吗？

我也在jsfiddle中添加了这个：http://jsfiddle.net/CpdM2/1/ 这里的高度不同，以更好地证明行为。

感谢您的帮助！

修改

我现在正在尝试与Jquery采用不同的方法。我越来越近，唯一的问题仍然是模糊功能。

我的新jquery：

$.fn.accessibleDropDown = function ()
{
    var el = $(this);

    $(el).mouseenter(function() {
        $("#menu").addClass('dropdown');
        $("#menu").animate({ height: '7em'});
    }).mouseleave(function() {        
            $("#menu").animate(
                   { height: '1em' }, 
                { complete: function() { $("#menu").removeClass('dropdown'); } }
            );
    });


    /* Make dropdown menus keyboard accessible */

    $("#menu").focus(function() {
        //alert("focus");
       $("#menu").addClass('dropdown');
        $("#menu").animate({ height: '7em'});
    }).blur(function() {
        setTimeout(function() { 
         if ($('#menu').find(':focus').length > 0) {
             return false;
        } else {
            alert("menu does not have focus");
            $("#menu").animate(
                { height: '1em' }, 
                { complete: function() { $("#menu").removeClass('dropdown'); } }
            );
        }
       }, 50);
    });
};



$("#menu").attr("tabindex",0).accessibleDropDown();

在此处查看此行动：http://jsfiddle.net/kBNRv/

查看#menu div是否失去焦点的代码是出于某种原因无效。我真的希望有人能指出我正确的方向。提前谢谢。

Answer 1

更简单的方法是使用它：

$("#menu").mouseenter(function() {
    $(this).addClass('dropdown');
    $(this).animate({height: '7em'});
    $(this).focus(); /*OPTIONAL*/       
});

$("#menu").mouseleave(function() {
    $(this).removeClass('dropdown'); 
    $(this).animate({height: '1em' });
    $(this).blur(); /*OPTIONAL*/  
});

可以在'mouseenter'和'mouseleave'上调用焦点和模糊方法，因为此列表元素不是输入类型，它不会通过以相同方式单击它来接受焦点。不确定为什么你需要关注，除非你以某种方式倾听这种行为。

另外，请注意，如果元素的z-index高于菜单，则此方法与原始方法非常相似。如果您在菜单上方放置了一个元素，那么如果您的鼠标滚过该元素，则会触发“mouseleave”方法。要查看示例，请在此处翻转“结果”框：http://jsfiddle.net/CpdM2/17/。所以要反击你可能想要的行为：

a）不要在菜单上添加任何元素。

b）在触发“mouseleave”方法之前，检查x，y鼠标位置以查看它们是否进入/退出菜单区域。检查鼠标位置的示例如下：http://docs.jquery.com/Tutorials:Mouse_Position

这是闪回的一种常见方法，当使用闪光灯时很酷.....叹气

Jquery悬停，焦点和模糊的可访问全宽下拉菜单

1 个答案: