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屋！