问题描述
我有主导航和子导航,出于设计原因,它们位于单独的DIV中.我想在悬停主导航项时显示适当的子导航,但是我也想让子导航保持打开状态,前提是用户将鼠标移到主导航项之外并移至子导航中-导航区域.最后一部分是我被卡住的地方.
I have main navigation and sub navigation that for reasons of design are in separate DIVs. I would like to show the appropriate sub-nav when a main nav item is hovered, which I can do, but I also want to keep the sub-nav open if the user moves their mouse outside of the main nav item and into the sub-nav area. The last part is the place where I'm getting stuck.
我正在考虑将鼠标悬停在外面,我需要使用setTimeout()和IF语句来做一些事情,但是在该领域我没有取得任何进展.这甚至是值得尝试的方法吗?
I'm thinking on the hover out I need to do something with setTimeout() and an IF statement, but I have not been able to make any progress in that area. Is that even an approach worth trying?
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();
});
});
推荐答案
对于鼠标菜单人体工程学,从主菜单切换到子菜单时,您需要一个小的延迟,因此子菜单不会在鼠标到达那里之前关闭. (如问题所述.)
For Mouse-menu ergonomics you want a small delay while mousing from main to sub menus, so the the sub menu does not close before the mouse gets there. (As the question says.)
但是,您还需要在菜单打开之前稍稍延迟-既避免烦人的天桥"激活,又可以减少意外地从 sub1 切换到 sub2 移出主菜单.
But, you also need a delay before menus open -- both to avoid annoying "flyover" activation, and to reduce the common occurrence of accidentally switching from sub1 to sub2 while moving off the main menu.
因此,问题代码需要:
-
hover
在子菜单ul
元素上. -
stop
如果鼠标选择发生变化,则暂停正在运行的动画. - 可重置计时器,同时控制打开和关闭.
hover
over the sub-menuul
elements.stop
to halt running animations if mouse selection changes.- A resettable timer controlling both open and close.
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
上需要执行的额外操作,以在子菜单之间的中断交换后清除.
Note the extra operations required on #snav ul
, to cleanup after interrupted swaps between sub-menus.
这篇关于jQuery悬停取决于两个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!