jQuery点击停止css悬停事件

Question

我有一个经典的 css 下拉菜单，其中 css 悬停选择器切换到“display:block;”

为了使用触控设备，我添加了这个脚本：

$(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();
});
});

悬停下拉菜单继续在桌面上工作，而菜单可以在触摸设备上单击。 但是，如果桌面用户碰巧用鼠标单击，它可以工作，但会完全禁用悬停在所有菜单上。然后只有点击有效。

知道为什么吗？我已经尝试完全禁用 css 悬停属性，并使用 mouseover 和 mouseout 事件处理 jQuery 中的所有内容，但是当单击 iOs 时触发 mouseover 然后立即单击事件，这会非常快速地打开关闭菜单，因此它不起作用。

HTML结构：

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

我在 CSS 中设置的其他内容：

div.vectorMenu div.menu {
    display: none;
}

div.vectorMenu:hover div.menu {
    display: block;
}

谢谢，

艾蒂安

Answer 1

您可以通过将 !important 添加到 :hover CSS 来使用纯 CSS 解决此问题：

div.vectorMenu:hover div.menu {
    display: block !important;
}

JS Fiddle Demo

Answer 2

编辑 （基于 OP 制作的小提琴）：

Working demo

Javascript：

$(document).ready(function () {
    $(".menuHead").on('click mouseenter mouseleave', '> li', function (evt) {
        var e = evt || window.event;
        switch (e.type || e.which) {
            case "click":
                if (!($(this).find('.menu').hasClass('stayOpen'))) {
                    $('.stayOpen').removeClass('stayOpen').hide();
                    $(this).find('.menu').addClass('stayOpen');
                } else {
                    $(this).find('.menu').removeClass('stayOpen').hide();
                }
                break;
            case "mouseenter":
                $(this).find('.menu').not('.stayOpen').addClass('open').show();
                break;
            case "mouseleave":
                $(this).find('.menu').not('.stayOpen').removeClass('open').hide();
                break;
            default:
                break;
        }
    });
});

HTML：

<ul class="menuHead">
    <li class="title">Menu #1
        <ul class="menu">
            <li>Menu #1 - Link #1</li>
            <li>Menu #1 - Link #2</li>
        </ul>
    </li>
    <li class="title">Menu #2
        <ul class="menu">
            <li>Menu #2 - Link #1</li>
            <li>Menu #2 - Link #2</li>
        </ul>
    </li>
</ul>

CSS：

.title {
    width: 150px;
    display: inline-block;
    position: relative;
}
.menu {
    display: none;
}
.open,
.stayOpen {
    position: absolute;
    top: 100%;
    display: block;
    width: 300px;
}

Answer 3

.hide 缺少括号。应该是：

$("div.menuHead").not($(this)).siblings("div.menu").hide();