jQuery点击事件阻止CSS悬停事件

Question

我有一个经典的CSS下拉菜单，使用CSS hover选择器切换到"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悬停属性，并使用jQuery处理所有mouseover和mouseout事件，但是在iOS上点击会立即触发mouseover和click事件，非常快地打开-关闭菜单，所以它无法正常工作。

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

感谢您的来信，

Etienne

- galinette

---

我根据我在这里看到的内容提供了一个答案，但是一个包含完整代码的JSfiddle会更有用，以便帮助您解决问题。 - Deryck

Answer 1

您的 .hide 缺少括号。应该改为：.hide()。

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

- Bryan Elliott

---

.not($(this)) 可以替换为 .not(this)。 - Ram

这是一个笔误，原始代码是正确的。它仍然具有相同的行为：CSS hover显示/隐藏只在第一次单击之前起作用。 - galinette

Answer 2

编辑 (基于OP制作的fiddle):

演示效果

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

- Deryck

---

使用“显示”而不是“切换”，将不允许通过再次单击来关闭菜单，其中一个将永远保持打开状态。这并不理想。 - galinette

初始的display:none;已经设置好了，以便制作纯CSS的悬停下拉菜单。 - galinette

.menu不起作用，menu是兄弟元素而不是.menuHead的子元素。 - galinette

等等，为什么它是一个兄弟节点？ - Deryck

问题是关于CSS hover，在jQuery处理第一次点击后不再起作用，没有其他问题。我在问题中发布了更多细节。你的示例中没有hover！ - galinette

现在你应该可以使用它了。新的演示在这里：http://jsfiddle.net/74jvF/，并且代码已经在帖子中更新。干杯！ - Deryck

Answer 3

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

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

JS Fiddle演示

- JSW189