Jquery/HTML下拉菜单悬停状态
问题描述:
我试图创建一个下拉菜单,即使当它悬停在下拉div('#units-menu-links')上时,它仍然保持打开悬停状态。当用户仍然在'单元菜单链接'div上徘徊时,我无法保持打开状态。目前它什么都不做,但是在第二个函数里面有.toggle之前,只要用户没有在“#units-nav”div上徘徊,它就会消失。Jquery/HTML下拉菜单悬停状态
这里是我的HTML是什么样子:
<div id="units-menu-links">
<center>
<p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p>
</center>
</div>
<div id="menu">
<div id="menu-inside">
<div class="bar">
<div class="nav-block" id="units-nav">
<a href="/link/">Menu Button</a>
</div>
</div>
</div>
</div>
这里是我的Jquery:
$('#units-menu-links').hide();
$("#units-nav").hover(
function() {
// Over the hover.
$('#units-menu-links').toggle();
},
function() {
// PLEASE READ THE FOLLOWING COMMENTS TO UNDERSTAND THE FUNCTIONALITY I AM TRYING TO GET.
// When the users leaves #units-nav and #units-menu-links
// then do the "$('#units-menu-links').toggle();" again to hide this.
// However if the user is hovering over "$('#units-menu-links').toggle();" then don't do anything.
}
);
(我在上了不少的问题和答案看起来是如此,以及看好Google,并且找不到任何东西来帮助我解决这个问题,看起来这是一个非常普遍的问题,但是人们创建的HTML结构与我的不同,这使得很难找到资源。)
答
尝试在鼠标移出子菜单时隐藏菜单:
$('#units-menu-links').hide();
$("#units-nav").hover(
function() {
$('#units-menu-links').show();
},
function() {
}
);
$("#units-menu-links").hover(
function() {
},
function() {
$('#units-menu-links').hide();
}
);
理想情况下,我建议不要使用JavaScript。
HTML:
<div id="menu" style="background-color: red">
<div id="menu-inside">
<div class="bar">
<div class="nav-block" id="units-nav">
<a href="/link/">Menu Button</a>
</div>
</div>
</div>
<div id="units-menu-links" style="background-color: green">
<center>
<p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p>
</center>
</div>
</div>
CSS:
#menu #units-menu-links {
display: none;
}
#menu:hover #units-menu-links {
display: block;
}
这里的Fiddle。
答
使用悬停时,应该将子菜单嵌套在#units-nav
元素下。然后它会工作。 如果不能这样做,你可以实现一些超时你的悬停功能的第二个回调,你可以停止超时,如果用户将盘旋#units-menu-links-element
..但这是有点可怕的,用户可以混淆那个行为。
答
$('#units-menu-links').hide();
var timeOut;
$("#units-nav").hover(
function() {
// Over the hover.
$('#units-menu-links').show();
clearTimeout(timeOut);
},
function() {
timeOut = setTimeout(function(){
$('#units-menu-links').hide();
}, 100);
}
);
$('#units-menu-links').hover(
function() {
clearTimeout(timeOut);
},
function() {
timeOut = setTimeout(function(){
$('#units-menu-links').hide();
}, 100);
}
)
是否有任何答案可以解决您的问题? – Stefan 2012-07-31 07:34:24