0

我有一个导航菜单，我想让某些链接在下面显示一个子菜单，这是总体布局http://jsfiddle.net/hcharge/HGtTz/

在我使用 jQuery hoverintent 来显示下面的菜单之前，但是这次我希望它在没有悬停和单击的情况下显示，并且能够通过 Tab 键使用键盘进行导航。

我对 jQuery 很陌生，我试图让菜单显示没有任何运气，有人能指出我正确的方向吗？我敢肯定这很简单，在下拉菜单中显示 none，然后单击或其他什么滑动？

如果您单击框外或其他链接，菜单也需要关闭。非常感谢。

4

3 回答 3

1

这是出于可访问性目的吗？如果是这样，请尝试 tabindex

http://www.w3schools.com/tags/att_standard_tabindex.asp

于 2012-08-15T13:02:58.997 回答
1

使用 tabindex 和 jquery 绑定焦点事件而不是触发任何你想要的

​$("li a").focus(function() {
    $(this).parent().find('ul').slideDown(200); // example of targeting nested UL with slide down animation
});

它应该像这样工作，然后使用模糊事件隐藏该子菜单

​$("li a").blur(function() {
        // your code here to hide submenu
    });

启用点击事件：

​$("li a").click(function() {
   // target all opened submenus and hide them by its class name
   $("ul.active-submenu").slideUp(200).removeClass("active-submenu"); 
   // adds class to submenu so you can determine easily which is active
   $(this).parent().find('ul').slideToggle(200).toggleClass('active-submenu');
});
于 2012-08-15T13:21:56.973 回答
0

jsfiddle.net/hcharge/HGtTz

以下链接是上述问题的解决方案

jsfiddle.net/HGtTz/23/

于 2012-11-21T07:57:25.633 回答