jQuery点击停止css hover事件 [英] jQuery click stops css hover events
问题描述
我有一个经典的css下拉菜单,css悬停选择器切换到display:block;
为了使用触摸设备,此脚本:
$(document).ready(function(){
$(div.menuHead) .click(function(){
//切换菜单,但不要在隐藏选择器中使用.not()
$(this).siblings(div.menu)。toggle ();
$(div.menuHead)。not($(this))。siblings(div.menu)。hide();
}); ;
悬浮式下拉菜单继续在桌面上工作,菜单可以在触摸设备上单击。 但是,如果桌面用户碰巧用鼠标点击,它会工作,但完全停用所有菜单上的悬停。然后只需点击即可。
任何想法为什么?我已经尝试完全禁用css hover属性,并处理jQuery中的所有事情mouseover和mouseout事件,但是当点击iOs触发鼠标悬停然后点击事件立即,打开关闭菜单非常快,因此它不工作。 p>
Html结构:
< div class =vectorMenu>
< div class =menuHead>菜单标题< / div>
< div class =menu>
< ul>
< li> Item1< / li>
< li> Item2< / li>
< li> Item3< / li>
< / ul>
< / div>
< / div>
在CSS中设置的其他内容:
div.vectorMenu div.menu {
display:none;
}
div.vectorMenu:hover div.menu {
display:block;
}
感谢,
Etienne
您在 .hide
上缺少括号。它应该是:
$(div.menuHead)。not($(this))siblings menu)。hide();
I have a classical css drop-down menu with css hover selector switching to "display:block;"
In order to work with touch devices, I have added this script:
$(document).ready(function () {
$("div.menuHead").click(function () {
//Toggle the menu but don't include it in the hide selector using .not()
$(this).siblings("div.menu").toggle();
$("div.menuHead").not($(this)).siblings("div.menu").hide();
});
});
The hover drop-down continues working on desktops, while the menu can be clicked on a touch device. However, if the desktop user happens to click with the mouse, it works but completely disables hovering on all menus. Then only clicking works.
Any idea why? I have tried disabling css hover properties completely, and handling everything in jQuery with mouseover and mouseout events, but when clicking iOs triggers a mouseover then a click event immediately, which open-closes the menu very quickly, so it does not work.
Html structure:
<div class="vectorMenu">
<div class="menuHead">Menu Title</div>
<div class="menu">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
</div>
Amongst other things I have set in CSS:
div.vectorMenu div.menu {
display: none;
}
div.vectorMenu:hover div.menu {
display: block;
}
Thanks,
Etienne
You are missing parenthesis on .hide
. It should be:
$("div.menuHead").not($(this)).siblings("div.menu").hide();
这篇关于jQuery点击停止css hover事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!