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触发鼠标悬停然后立即单击事件时，它会非常快速地打开关闭菜单，因此它不起作用。

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

.hide上缺少括号。它应该是：

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

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

您可以通过将!important添加到:hover CSS：

来使用纯CSS解决此问题

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

jQuery单击停止css悬停事件

3 个答案:

Working demo

使用Javascript：

HTML：

CSS：

JS Fiddle Demo