I have a dropdown menu that shows on hover. The menu becomes hidden again after I mouse away from it and I can't click on any of submenus.
我有一个显示悬停的下拉菜单。在我离开它之后菜单再次隐藏,我无法点击任何子菜单。
$('.toggle-menu').on('hover',function(e){
e.preventDefault();
$(this).parent().siblings().children('.toggle-menu').removeClass('show').next().slideUp();
$(this).toggleClass('show').next().slideToggle();
e.stopPropagation();
});
How can I stop closing the dropdown menu if the mouse is hover the dropdown container?
如果鼠标悬停在下拉列表容器中,如何停止关闭下拉菜单?
我的jsFiddle示例
Any help is greatly appreciated! Thank you so much!
任何帮助是极大的赞赏!非常感谢!
5 个解决方案
#1
2
The mouseover solution has a slight problem if you hit the menu too quick while it is sliding.
如果您在滑动时快速点击菜单,鼠标悬停解决方案会有一些问题。
Use the li as a parent:
使用li作为父母:
$('.toggle-menu-parent').on('hover', function(e){
e.preventDefault();
$(this).siblings().children('.toggle-menu').removeClass('active').next().slideUp();
$(this).find('.toggle-menu').toggleClass('active').next().slideToggle();
e.stopPropagation();
});
http://jsfiddle.net/3uLxb/16/
#2
4
use mouseover instead of hover
使用鼠标悬停而不是悬停
change
更改
$('.toggle-menu').on('hover',function(e){
to
至
$('.toggle-menu').on('mouseover',function(e){
#3
2
js
JS
$('.toggle').on('hover',function(e){
e.preventDefault();
$(this).siblings().children('.toggle-menu').removeClass('active').next().slideUp();
$(this).find('.toggle-menu').toggleClass('active').next().slideToggle();
e.stopPropagation();
});
html
HTML
<ul class="nav">
<li class="toggle">
<a href="#" class="toggle-menu"><span></span>MENU 1</a>
<ul class="menu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li class="toggle">
<a href="#" class="toggle-menu"><span></span>MENU 2</a>
<ul class="menu2">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
</ul>
</li>
</ul>
http://jsfiddle.net/3uLxb/15/
#4
1
use mouseover and mouseout event to handle this.
使用mouseover和mouseout事件来处理这个问题。
$('.toggle-menu').on('mouseover',function(e){...
check this http://jsfiddle.net/nkNUz/ use mouseout event to hide according to your logic
检查这个http://jsfiddle.net/nkNUz/使用mouseout事件根据你的逻辑隐藏
#5
1
Actually, what you should do is encapsulate your <li>
s in divs with overflow:hidden
and your height
set that only the "Menu" item showing.
实际上,你应该做的是将你的
On hover
you should animate
your height
downward to show all <li>
s. You won't need to mouseover
or mouseout
separately if you are selecting the <div>
as your jQuery element.
在悬停时,您应该向下设置高度动画以显示所有
#1
2
The mouseover solution has a slight problem if you hit the menu too quick while it is sliding.
如果您在滑动时快速点击菜单,鼠标悬停解决方案会有一些问题。
Use the li as a parent:
使用li作为父母:
$('.toggle-menu-parent').on('hover', function(e){
e.preventDefault();
$(this).siblings().children('.toggle-menu').removeClass('active').next().slideUp();
$(this).find('.toggle-menu').toggleClass('active').next().slideToggle();
e.stopPropagation();
});
http://jsfiddle.net/3uLxb/16/
#2
4
use mouseover instead of hover
使用鼠标悬停而不是悬停
change
更改
$('.toggle-menu').on('hover',function(e){
to
至
$('.toggle-menu').on('mouseover',function(e){
#3
2
js
JS
$('.toggle').on('hover',function(e){
e.preventDefault();
$(this).siblings().children('.toggle-menu').removeClass('active').next().slideUp();
$(this).find('.toggle-menu').toggleClass('active').next().slideToggle();
e.stopPropagation();
});
html
HTML
<ul class="nav">
<li class="toggle">
<a href="#" class="toggle-menu"><span></span>MENU 1</a>
<ul class="menu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li class="toggle">
<a href="#" class="toggle-menu"><span></span>MENU 2</a>
<ul class="menu2">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
</ul>
</li>
</ul>
http://jsfiddle.net/3uLxb/15/
#4
1
use mouseover and mouseout event to handle this.
使用mouseover和mouseout事件来处理这个问题。
$('.toggle-menu').on('mouseover',function(e){...
check this http://jsfiddle.net/nkNUz/ use mouseout event to hide according to your logic
检查这个http://jsfiddle.net/nkNUz/使用mouseout事件根据你的逻辑隐藏
#5
1
Actually, what you should do is encapsulate your <li>
s in divs with overflow:hidden
and your height
set that only the "Menu" item showing.
实际上,你应该做的是将你的
On hover
you should animate
your height
downward to show all <li>
s. You won't need to mouseover
or mouseout
separately if you are selecting the <div>
as your jQuery element.
在悬停时,您应该向下设置高度动画以显示所有