如何让我的子菜单在 jQuery 悬停菜单中保持打开状态？

Posted 2023-05-09

【中文标题】如何让我的子菜单在 jQuery 悬停菜单中保持打开状态？

【英文标题】：How can I keep my sub-menu open in jQuery hover menu?

【发布时间】：2012-01-15 12:39:33

【问题描述】：

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

我的问题是，虽然我可以向他们显示其他选项卡的子菜单，但我不能让子菜单保持打开状态以供用户单击子菜单项。其他教程仅在子菜单嵌套在父元素中时显示如何执行此操作，但我的菜单结构代码没有嵌套子菜单（这是我加入项目时的代码）。如果用户将鼠标悬停在相应的选项卡上，有什么方法可以让子菜单保持打开状态？

这是我的菜单 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：

// 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"
elsestartMenu = "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();      
);

【参考方案1】：

我有一个类似的情况，并通过将 mouseover 事件拆分为单独的 mouseenter 和 mouseleave 事件来解决它。只是伪代码/大纲，但根据您的情况尝试类似：

$("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 事件。像这样的：

$("#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();
 );

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

【讨论】：

有趣！我得试试这个。我最终重新格式化了我的整个菜单并像教程所说的那样嵌套了所有内容。它有效，但知道如何以另一种方式做到这一点很好。谢谢！

【参考方案2】：

我遇到了类似的情况，不幸的是，我无法重新格式化整个菜单以适应“正确的”父/子结构。

如果您也只是简单地调用选择器中的子菜单，它将在悬停状态下保持“打开”状态。

http://jsfiddle.net/K5P9Z/

示例 -

jQuery(document).ready(function($) 

$('#kids, .menu-1').hover(function() 
    $('.menu-1').show();
, function() 
    $('.menu-1').hide();
);
 $('#community, .menu-2').hover(function() 
    $('.menu-2').show();
, function() 
    $('.menu-2').hide();
);
 $('#about, .menu-3').hover(function() 
    $('.menu-3').show();
, function() 
    $('.menu-3').hide();
);

);​

【讨论】：

这是一个隐藏的答案！