jQuery悬停依赖于两个元素

Question

由于设计原因，我有主导航和子导航，它们位于单独的 DIV 中。我想在主导航项悬停时显示适当的子导航，我可以这样做，但如果用户将鼠标移到主导航项之外并进入子导航项，我也希望保持子导航打开-导航区域。最后一部分是我陷入困境的地方。

我正在考虑悬停，我需要使用 setTimeout() 和 IF 语句做一些事情，但我在该领域未能取得任何进展。这是否值得尝试？

HTML:

<div id="mnav">
 <ul id="buttons">
  <li class="one"><a href="#">Main 1</a></li>
  <li class="two"><a href="#">Main 2</a></li>
  <li class="three"><a href="#">Main 3</a></li>
  <li class="four nav-dark"><a href="#">Main 4</a></li>
 </ul>
</div> <!-- /mnav -->

<div id="snav">
 <ul class="snav-one">
    <li><a href="#">Sub 1.1</a></li>
    <li><a href="#">Sub 1.2</a></li>
    <li><a href="#">Sub 1.3</a></li>
    <li><a href="#">Sub 1.4</a></li>
    <li><a href="#">Sub 1.5</a></li>
    <li><a href="#">Sub 1.6</a></li>
 </ul>
 <ul class="snav-two">
    <li><a href="#">Sub 2.1</a></li>
    <li><a href="#">Sub 2.2</a></li>
 </ul>
</div> <!-- /snav -->

JS:

$(document).ready(function() {
 $("#buttons li.one, #buttons li.two").hover(function(){
  var subnav = 'ul.snav-' + $(this).attr('class');

  $("#snav").slideDown('fast').addClass("open").find(subnav).show();

 }, function(e){
  var subnav = 'ul.snav-' + $(this).attr('class');

  $("#snav").slideUp('fast').removeClass("open").find(subnav).hide();
 });
});

Answer 1

对于鼠标菜单人体工程学设计，您希望在从主菜单到子菜单之间移动鼠标时有一点延迟，因此子菜单在鼠标到达那里之前不会关闭。 (正如问题所说。)

但是，您还需要在菜单打开之前进行延迟 - 既可以避免烦人的“flyover”激活，也可以减少从 sub1 意外切换到 sub2 的常见情况> 离开主菜单时。

所以，问题代码需要:

1. 将鼠标悬停在子菜单 ul 元素上。
2. stop 在鼠标选择发生变化时停止运行动画。
3. 可重置定时器控制打开和关闭。

<强> See the demo at jsFiddle .

把它们放在一起:

$("#buttons li.one, #buttons li.two").hover ( function () { MenuOpenCloseErgoTimer (
        100,
        function (node) {
            var subnav = 'ul.snav-' + $(node).attr ('class');
            $("#snav ul").hide ();
            $("#snav").stop (true, true).slideDown ('fast').addClass ("open").find (subnav).show ();
        },
        this
    ); },
    function () { MenuOpenCloseErgoTimer (
        200,
        function () {
            $("#snav").stop (true, true).slideUp ('fast').removeClass ("open").find ('ul').hide ();
        }
    ); }
);

$("div#snav ul").hover ( function () { MenuOpenCloseErgoTimer (
        0,
        function () {
            $("#snav").stop (true, true).slideDown ('fast').addClass ("open");
            $(this).show ();
        }
    ); },
    function () { MenuOpenCloseErgoTimer (
        200,
        function () {
            $("#snav").stop (true, true).slideUp ('fast').removeClass ("open");
            $("#snav ul").hide ();
        }
    ); }
);

function MenuOpenCloseErgoTimer (dDelay, fActionFunction, node) {
    if (typeof this.delayTimer == "number") {
        clearTimeout (this.delayTimer);
        this.delayTimer = '';
    }
    if (node)
        this.delayTimer     = setTimeout (function() { fActionFunction (node); }, dDelay);
    else
        this.delayTimer     = setTimeout (function() { fActionFunction (); }, dDelay);
}

请注意 #snav ul 上需要额外的操作，以便在子菜单之间的交换中断后进行清理。