如何在 jQuery 悬停菜单中保持我的子菜单打开? [英] How can I keep my sub-menu open in jQuery hover menu?

查看：19 发布时间：2022/1/6 15:04:25 jquery menu submenu jquery-hover

本文介绍了如何在 jQuery 悬停菜单中保持我的子菜单打开?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我上周刚开始用 jQuery 编码，需要一些帮助来弄清楚如何使菜单正常工作.我有 3 个标签，每个标签都有自己的菜单.显示页面时，会自动显示菜单和子菜单.显示后，用户可以将鼠标悬停在选项卡上以查看其他子菜单，当他们停止悬停时，原始子菜单就会出现.

我的问题是，虽然我可以向他们显示其他选项卡的子菜单，但我无法保持子菜单打开以供用户单击子菜单项.其他教程仅在子菜单嵌套在父元素中时展示了如何执行此操作，但我的菜单结构代码没有嵌套子菜单(这是我加入项目时的代码).如果用户将鼠标悬停在相应的选项卡上，是否可以通过某种方式使子菜单保持打开状态?

这是我的菜单 HTML:

 
<div id="main-nav"><div id="kids"><a href="../images/nav1.png"></a></div><div id="社区"><a href="../images/nav2.png"></a></div><div id="about"><a href="../images/nav3.png"></a></div>

到目前为止，这是我的 jQuery:

//对于JS用户，默认显示子菜单$(".requiresJS").css("display","block");变量开始菜单//隐藏所有子菜单$("#sub-nav ul").hide();//检查关于、社区或孩子的 URL 并使用正确的术语设置 startMenuif(window.location.href.indexOf("about") != -1){startMenu = "about"}else if(window.location.href.indexOf("community") != -1){startMenu = "community"}else{startMenu = "孩子们"}//突出显示正确的类别选项卡$("div#main-nav #" + startMenu).addClass("selected");//显示正确的启动菜单$("#sub-nav ul.menu-" + startMenu).show('slide', {direction: 'right'}, 600).effect("bounce", { times:1,direction:"right",距离:13 }, 300);//在 div 鼠标悬停时显示正确的菜单$("div#main-nav div").mouseover(function() {$("#sub-nav ul").stop(true, true)$("#sub-nav ul").hide();var currentId = $(this).attr('id');$("#sub-nav ul.menu-" + currentId).show();});$("div#main-nav div").mouseover(function() {$("#sub-nav ul").stop(true, true)$("#sub-nav ul").hide();var currentId = $(this).attr('id');$("#sub-nav ul.menu-" + currentId).show();});

解决方案

我遇到了类似的情况，通过将 mouseover 事件拆分为单独的 mouseenter 和 mouseleave 事件来解决.只是伪代码/大纲，但对于您的情况，请尝试以下操作:

$("div#main-nav div").mouseenter(function() {//检查子菜单是否打开，如果已经打开则返回//(我在子菜单打开时添加了一个'menu_open'类)//隐藏打开的子菜单的代码//打开选定子菜单的代码});

然后使用 mouseleave 和它的事件的 toElement 属性来检查鼠标指针去了哪里，如果它转到子菜单，则什么都不做，如果不关闭所有子菜单.请注意，您还需要在子菜单上连接 mouseleave 事件.像这样:

$("#main-nav div").mouseleave(function (event) {var toElem = $(event.toElement);if (toElem.closest("div.sub-nav").id=="subnav") 返回；//有更好的方法来做到这一点...重点是检查鼠标是否进入子菜单，如果进入，则保持打开状态.//关闭所有打开的子菜单，例如$("#sub-nav ul").hide();});$("#subnav ul").mouseleave(function (event) {var toElem = $(event.toElement);if (toElem.closest("div.sub-nav").id=="subnav") 返回；//检查是否进入子菜单if (toElem.closest("div#main-nav")) 返回；//检查是否进入主菜单//关闭所有打开的子菜单，例如$("#sub-nav ul").hide();});

希望对你有帮助.刚刚自己解决了这个问题，所以还没来得及打磨它，我相信有更好更漂亮的方法来做到这一点.

I just started coding in jQuery last week and need some help figuring out how to make a menu work properly. I have 3 tabs each with their own menu. When a page is displayed a menu and a sub menu is automatically displayed. Once it's displayed the user can hover over the tabs to see the other sub menus and when they stop hovering the originally sub menu appears.

My issue is that although, I can show them the sub menu of the other tabs, I can't keep the sub menu open for the user to click on a sub menu item. Other tutorials show how to do this only when the sub menu is nested within a parent element, but my code for the menu structure doesn't have the sub menus nested (this is how the code was when I joined the project). Is there some way I can keep the sub-menu open if the user hovers on the respective tab?

Here is my menu HTML:

    <div id="navigation">
        <div id="main-nav">
            <div id="kids"><a href="../images/nav1.png"></a></div>
            <div id="community"><a href="../images/nav2.png"></a></div>
            <div id="about"><a href="../images/nav3.png"></a></div>
        </div>
    </div>

    <div id="sub-nav"> 
        <ul class="menu-1 requiresJS">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
        </ul>
        <ul class="menu-2 requiresJS">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
        </ul>
        <ul class="menu-3 requiresJS">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
        </ul>

Here is my jQuery thus far:

// For JS users, display sub menus by default
$(".requiresJS").css("display","block");

var startMenu

//hide all sub menus
$("#sub-nav ul").hide();

// check URL for about, community or kids and set startMenu with correct term
if(window.location.href.indexOf("about") != -1){startMenu = "about"}
else if(window.location.href.indexOf("community") != -1){startMenu = "community"}
else{startMenu = "kids"}

// highlight correct category tab
$("div#main-nav #" + startMenu).addClass("selected");

// show correct starting menu
$("#sub-nav ul.menu-" + startMenu).show('slide', {direction: 'right'}, 600).effect("bounce", { times:1,direction:"right",distance:13 }, 300);

// show correct menu on mouseover of div
$("div#main-nav div").mouseover(function() {

    $("#sub-nav ul").stop(true, true)
    $("#sub-nav ul").hide();

    var currentId = $(this).attr('id');

    $("#sub-nav ul.menu-" + currentId).show();      
});

$("div#main-nav div").mouseover(function() {
        $("#sub-nav ul").stop(true, true)
        $("#sub-nav ul").hide();
        var currentId = $(this).attr('id');
        $("#sub-nav ul.menu-" + currentId).show();      
});

解决方案

I had a similar case, and solved it by splitting up the mouseover event into separate mouseenter and mouseleave events. Just pseudocode / an outline, but with your case try something like:

$("div#main-nav div").mouseenter(function() {
   // Check if sub menu is open, return if it is allready open
   // (I add a 'menu_open' class to sub menu when it is opened)

   // Code to hide open submenues
   // Code to open selected submenu      
});

Then use mouseleave and the toElement property of its event to check where the mousepointer went, if it went to a sub menu, do nothing, if not close all sub menues. Note that you need to hook up mouseleave events on the sub menues too. Something like this:

$("#main-nav div").mouseleave(function (event) {
   var toElem = $(event.toElement);
   if (toElem.closest("div.sub-nav").id=="subnav") return; // Prob nicer way to do this...point is to check if mouse enters a submenu, and if so stay open.
   // Close all open submenues, e.g. 
   $("#sub-nav ul").hide();
 });

 $("#subnav ul").mouseleave(function (event) {
    var toElem = $(event.toElement);
    if (toElem.closest("div.sub-nav").id=="subnav") return; // Check if entering submenu
    if (toElem.closest("div#main-nav")) return; // Check if entering main menu
    // Close all open submenues, e.g.
    $("#sub-nav ul").hide();
 });

Hope this is of some help to you. Just solved this myself, so haven't had time to polish it, I'm sure there are better and prettier ways to do this.

这篇关于如何在 jQuery 悬停菜单中保持我的子菜单打开?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何在 jQuery 悬停菜单中保持我的子菜单打开? [英] How can I keep my sub-menu open in jQuery hover menu?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何在 jQuery 悬停菜单中保持我的子菜单打开? [英] How can I keep my sub-menu open in jQuery hover menu?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭