jQuery悬停依赖于两个元素

我有主导航和子导航,出于设计原因,它们位于不同的DIV中.我希望在主要导航项目悬停时显示相应的子导航,我可以这样做,但是如果用户将鼠标移动到主导航项目之外并进入子导航,我还希望保持子导航打开-nav区域.最后一部分是我被卡住的地方.

我正在考虑悬停我需要用setTimeout()和IF语句做一些事情,但我无法在该领域取得任何进展.这甚至是一种值得尝试的方法吗？

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

解决方法

对于鼠标菜单人体工程学,您需要在从主菜单到子菜单的鼠标中进行小延迟,因此在鼠标到达之前子菜单不会关闭. (正如问题所说.)

但是,在菜单打开之前还需要延迟 – 既可以避免恼人的“天桥”激活,又可以减少在离开主菜单时偶然从sub1切换到sub2的常见情况.

所以,问题代码需要：

>将鼠标悬停在子菜单ul元素上.
>如果鼠标选择发生变化,请停止停止运行动画.
>可重置的计时器,控制打开和关闭.

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,true).slideDown ('fast').addClass ("open");
            $(this).show ();
        }
    ); },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所需的额外操作,以便在子菜单之间中断交换后进行清理.

jQuery悬停依赖于两个元素

解决方法

猜你在找的jQuery相关文章