Question

我使用jQuery创建了一个简单的下拉菜单。它可以很好地响应悬停事件。我还希望它能够响应焦点和模糊事件以支持键盘用户。事件绑定到一个元素，我已经将tabindex值添加到元素中以实现浏览器兼容性。但是，当主要元素获得键盘焦点时，菜单不会打开。

HTML：

  <ul class="mainmenu">
     <li><p><a href="#" tabindex="1">Cruises</a></p>
        <ul class="submenu">
           <li><a href="#">Whale watching</a></li>
           <li><a href="#">Birding</a></li>
           <li><a href="#">Dinner</a></li>
           <li><a href="#">School field trips</a></li>
        </ul>
     </li>
     <li><p><a href="#" tabindex="2">Rates</a></p>
        <ul class="submenu">
           <li><a href="#">Children (0-17)</a></li>
           <li><a href="#">Adults</a></li>
           <li><a href="#">Seniors (60+)</a></li>
           <li><a href="#">Groups</a></li>
        </ul>
     </li>
     <li><p><a href="#" tabindex="3">Directions</a></p>
        <ul class="submenu">
           <li><a href="#">From the north</a></li>
           <li><a href="#">From the south</a></li>
           <li><a href="#">From the east</a></li>
        </ul>
     </li>
  </ul>

jQuery的：

function display() {
   $(this).children("ul").show();
}

function hide() {
   $(this).children("ul").hide();   
}


$(function(){
   $("ul.mainmenu li").hover(display,hide);
   $("ul.mainmenu li a").focus(display);
   $("ul.mainmenu li a").blur(hide);
});

绑定到我错过的悬停事件的任何技巧？

小提琴： http://jsfiddle.net/shameless/bw6GJ/

Answer 1

试试这个：

function display() {
   var $this = $(this)
   var $ul = $this.children("ul");

   if (!$ul.length)
        $ul = $this.parents('li:first').children('ul');

   $ul.show();
}

function hide() {
   var $this = $(this)
   var $ul = $this.children("ul");

   if (!$ul.length)
        $ul = $this.parents('li:first').children('ul');

   $ul.hide();   
}

问题是，当为display / hide事件触发focus / blur函数时，函数上下文是<a>元素因此，函数中的this关键字引用的是错误的元素，而不是您想要的父<li>（如hover）。

添加jQuery焦点和模糊到菜单的可访问性

1 个答案: