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

问题描述

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

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?

这是我的菜单HTML:

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>

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

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();      
});

推荐答案

我有一个类似的案例，并通过将mouseover事件拆分为单独的mouseenter和mouseleave事件来解决.只是伪代码/大纲，但在您的情况下，请尝试类似以下操作:

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      
});

然后使用mouseleave及其事件的toElement属性检查鼠标指针的去向，如果它进入子菜单，则不执行任何操作，如果不关闭所有子菜单，则不执行任何操作.请注意，您还需要在子菜单上挂接mouseleave事件.像这样:

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屋！