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”。当我悬停带有标题“开始”的图像时，则＆lt; ul＆gt;显示ID“start”。等等。

它工作正常，但我的问题是“Mouseout”。当我使用Mouseout Event作为'#head_navigation'时，当我想将li项目悬停在子菜单上时，我的子导航消失了。你理解我的意思???

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

谢谢你。

问候，的Sascha

澄清

我有一个嵌套的导航菜单，其中子导航基于 title 属性显示图像$（'＃head_navigation img'）的 onmouseover 。

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

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

然后在每个悬停操作中，鼠标悬停在runHoverTimer（）和鼠标输出上运行resumeHoverTimer（）;我有这种设置的方式，它会在用户没有将鼠标悬停在菜单上3秒后隐藏菜单。我想你可能希望缩短它。

jQuery问题鼠标悬停在第二个

澄清

2 个答案: