3

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

这是菜单的 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 是否失去焦点的代码由于某种原因无法正常工作。我真的希望有人能指出我正确的方向。提前致谢。

4

1 回答 1

0

一种更简单的方法是改用它：

$("#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' 上调用 focus 和 blur 方法，因为此列表元素不是输入类型，它不会通过以相同方式单击它来接受焦点。除非您以某种方式倾听这种行为，否则不确定您为什么需要关注。

另外，请注意，如果元素的 z-index 高于您的菜单，则这种方法与您的原始方法非常相似。如果您在菜单上方放置一个元素，则当您的鼠标滑过该元素时将触发“mouseleave”方法。要查看示例，只需在此处翻转“结果”框：http: //jsfiddle.net/CpdM2/17/。因此，为了应对您可能想要的行为：

a) 避免在菜单上添加任何元素。

b) 在触发“mouseleave”方法之前，检查 x、y 鼠标位置以查看它们是否在您的菜单区域内/外。检查鼠标位置的示例在这里：http ://docs.jquery.com/Tutorials:Mouse_Position

这是闪回中常用的方法，当使用闪光灯很酷时.....叹息

于 2013-05-31T19:32:44.170 回答