jQuery 问题鼠标悬停第二

Question

我有一个包含以下代码的菜单：

    <div id="head_navigation">
     <ul>
         <li><a href="javascript:void(0);"><img src="img/start.jpg" width="57" height="40" title="start" alt="" /></a></li>
         <li><a href="javascript:void(0);"><img src="img/favoriten.jpg" width="87" height="40" title="favoriten" alt="" /></a></li>
        </ul>
    </div>

    <div id="head_subnavigation">
     <ul id="start" class="hidden">
         <li><div class="button"><a href="javascript:void(0)" onclick="cwload('arztauswertung.html','start');" title="Rezeptsuche"><img src="img/icons/icon_rezeptsuche_on.png" width="50" height="62" alt="Rezeptsuche" /><br />Rezeptsuche</a></div></li>
         <li><div class="button"><a href="javascript:void(0)" onclick="cwload('arztauswertung.html','start');"><img src="img/icons/icon_zuzahlung_on.png" width="50" height="62" alt="Zuzahlung" /><br />Zuzahlung</a></div></li>
         <li><div class="button"><a href="javascript:void(0)" onclick="cwload('arztauswertung.html','start');"><img src="img/icons/icon_abrechnung_on.png" width="50" height="62" alt="Abrechnung" /><br />Abrechnung</a></div></li>
        </ul>
    </div>

'#head_subnavigation' 的 CSS 为“display:none”。当我将带有标题“start”的图像悬停时，会显示 ID 为“start”的

。等等。

它工作正常，但我的问题是“Mouseout”。当我对“#head_navigation”使用 Mouseout 事件时，当我想将 li 项悬停在子菜单上时，我的子导航消失。你明白我的意思吗？？？

只有当我跳转到“head_navigation” div 中的另一个 li 项目或鼠标移出“#head_subnavigation” div 时，我如何才能使用 Mouseout，但当我用鼠标从“head_navigation”移动到“head_subnavigation”时不能使用' ？？？任何人都可以帮忙吗？尝试了很多东西 - 没有什么真正有效... :(

谢谢。

您好， 萨沙

澄清

我有一个嵌套导航菜单，其中基于 title 属性显示图像 $('#head_navigation img') 的 onmouseover 子导航。 p>

我希望子导航保持打开状态，直到我鼠标移出子导航或图像。

Answer 1

最快的方法是将所有菜单包装到一个更大的 DIV 中，并在该 DIV 的 mouseout 事件中隐藏菜单。 您还应该确保在任何给定时间只有一个子菜单可见（例如，在显示新菜单时隐藏打开的菜单）。

Answer 2

你可以这样做：

$('#head_navigation li a').hover(function(){

    // Hide the visible subnavigations
    $('#head_subnavigation ul:visible').css('display','none');

    // Show the appropriate subnavigation
    $('#head_subnavigation ul#' + $(this).attr('title')).css('display','block');

});

这样，当您将鼠标悬停在新的顶级导航 li 上时，当前可见的 #head_subnavigation ul 将被隐藏。您应该将整个导航包裹在一个 div 中，以在用户完全离开菜单区域时处理 mouseout 事件。

$('#navigationDiv').mouseout(function(){

    $('#head_subnavigation ul:visible').css('display','none');

});

使用包装 div 的问题在于，如果菜单超出 div，mouseout 事件将触发，从而隐藏您的菜单。您可以采取另一种方法...

// Globals
var menuHoverTimer = 0;
var menuHoverTimerLimit = 3; // 3 seconds
var menuHoverTimerIntervalID;

function stopHoverTimer(){
    clearInterval(menuHoverTimerIntervalID);
}
function resumeHoverTimer(){
    // This will run the menuHoverHandler function every 1 second
    menuHoverTimerIntervalID = setInterval(menuHoverHandler, 1000);
}
function menuHoverHandler(){
    menuHoverTimer++;
    if(menuHoverTimer > menuHoverTimerLimit) {
        stopHoverTimer();
        $('#head_subnavigation ul:visible').css('display','none');
        menuHoverTimer = 0;
    }
}

然后在每个悬停动作中，鼠标悬停运行 stopHoverTimer() 和鼠标悬停运行 resumeHoverTimer();按照我的设置方式，它将在用户未将鼠标悬停在菜单上 3 秒后隐藏菜单。我想你可能希望它更短。