[英]How can I keep my sub-menu open in jQuery hover menu - please check sample
You can see sample code from here Sample code 您可以从此处查看示例代码。
The Goal: 目标:
I tried many times and searched for solutions but cant achieve. 我尝试了很多次并寻找解决方案,但无法实现。
Also I cant put sub menu under a element. 我也不能把子菜单放在一个元素下。 Because when a shrinks(gets wither) the sub menu relatively changes its position. 因为当缩小(变干)时,子菜单会相对更改其位置。 It's not compatible for me. 对我来说不兼容。
<div class="menu-item"><a href="index.html"><i class="halflings white cog"></i> <span>Link One</span></a>
<div style="height:0;position:absolute;">
<div class="sub-menu" data-hover='false'>
<div>Sub Link</div>
<div>Sub Link</div>
<div>Sub Link</div>
<div>Sub Link</div>
</div>
</div>
</div>
You are using closing sub-menu's code: 您正在使用关闭子菜单的代码:
$(this).parent().find('.sub-menu').css({display: "none"})
.stop(true, false).animate({width:'0',height:'0',opacity:1},'fast');
in the wrong place. 在错误的地方。 You can close it just after hover is false (like is in the another hover function). 您可以在悬停为假之后立即将其关闭(就像在另一个悬停函数中一样)。 Then, invert this 'if' logic: 然后,反转此“ if”逻辑:
if(!$(this).parent().find('.sub-menu').data('hover'))
to: 至:
if($(this).parent().find('.sub-menu').data('hover'))
and for end just add this 'if' after the another 'if': 最后,只需将此“ if”添加到另一个“ if”之后:
if(!$(this).parent().find('.sub-menu').is(':visible')){
$(this).stop(true, false).animate({width:'15px'},'fast');
}
Here is the fiddle: http://jsfiddle.net/a8yZb/52/ 这是小提琴: http : //jsfiddle.net/a8yZb/52/
Finally I solved this issue, by using these functions: 最后,我通过使用以下功能解决了这个问题:
setTimeout();
clearTimeout();
The solution is here: http://jsfiddle.net/a8yZb/55/ 解决方案在这里: http : //jsfiddle.net/a8yZb/55/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.