Question

我有一个导航菜单，我希望某些链接显示下面的子菜单，这里是一般布局http://jsfiddle.net/hcharge/HGtTz/

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

我是jQuery的新手，我试图让菜单显示没有任何运气，是否有人能指出我正确的方向？我确定这很简单，在下拉列表中没有显示，然后只需点击一下就可以了？

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

Answer 1

这是否可用于辅助功能？如果是这样，请尝试使用tabindex

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

Answer 2

使用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');
});

Answer 3

jsfiddle.net/hcharge/HGtTz

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

jsfiddle.net/HGtTz/23 /

jQuery导航巨型菜单点击不悬停

3 个答案: