j查询导航超级菜单通过点击不悬停

jQuery navigation mega menu by click not hover

本文关键字：悬停 菜单 查询 导航      更新时间：2023-09-26

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

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

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

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

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

这是出于可访问性目的吗？如果是这样，请尝试选项卡索引

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

jsfiddle.net/hcharge/HGtTz

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

jsfiddle.net/HGtTz/23/

相关文章：