jQuery悬停取决于两个元素
|
我有主导航和子导航，出于设计原因，它们位于单独的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 -->
$(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();
});
});
没有找到相关结果
已邀请:
3 个回复
蕾跨立锌煤
元素上的。 mouse4ѭ如果鼠标选择发生变化，则停止正在运行的动画。 一个可重置计时器，同时控制打开和关闭。 请参阅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); }混侩闯空坷
<script> var timer; $(document).ready(function() { $(\"#mnav\").mouseenter(function() { $(\"#snav\").slideDown(); }); $(\"#mnav, #snav\").mouseleave(function() { timer=setTimeout(\"$(\'#snav\').slideUp();\",50); }); $(\"#mnav, #snav\").mouseenter(function() { clearTimeout(timer); }); }); </script>祁澈盘哼颗
方法在进入子导航时暂停动画 将幻灯片移动到subnav ul的位置而不是容器，因此上述操作可行 其他一些事情 见下文：$(\"#buttons li.one, #buttons li.two\").hover(function() { var subnav = \'ul.snav-\' + $(this).attr(\'class\'); $(\"#snav\").find(\'ul\').slideUp(\'fast\'); $(\"#snav\").addClass(\"open\").find(subnav).stop(true, true).slideDown(\'fast\'); }, function(e) { var subnav = \'ul.snav-\' + $(this).attr(\'class\'); $(\"#snav\").removeClass(\"open\").find(subnav).slideUp(\'fast\'); }); $(\'#snav\').bind(\'mouseenter\', function(e) { $(this).find(\'ul\').stop(true, false); }).bind(\'mouseleave\', function(e) { $(this).find(\'ul\').stop(true, true).slideUp(\'fast\'); });