jquery - 从父元素中删除类

Question

我想要做的是从下拉 div 中删除开放类，以便菜单在悬停时显示而不是在单击时显示，但我就是无法将其删除。也许我不明白这是如何工作的。我所知道的是，在 mouseleave 函数出现之前，我一直设法做到这一点。我正在使用 Bootstrap 3。

HTML

<div class="dropdown">
    <a data-toggle="dropdown" data-target="#" href="#" class="active"> Home <span class="main-text-color light">+</span> </a>
    <ul class="dropdown-menu" role="menu">
        <li>home shop</li>
        <li>home events</li>
        <li>home paralax</li>
        <li>home blog</li>
        <li>home portfolio</li>
        <li>home corporate : v1</li>
        <li>home corporate : v2</li>
        <li>home corporate : v3</li>
        <li>home corporate : v4</li>
        <li>home corporate : v5</li>
        <li>home corporate : v6</li>
        <li>create your own <i class="fa fa-play-circle-o"> </i> </li>
    </ul>
</div>

Javascript

$('.dropdown').hover(function () {
    $(this).addClass("open");
    $(this).children('.dropdown-menu').mouseleave(function () {
        $(this).parent().removeClass("open");
    });
});

Answer 1

很少观察

• 由于悬停调用只有一个回调函数，它将在 dropdown 事件的 mouseenter 和 mouseleave 事件上执行
• 它会导致多个 mouseleave 事件被注册到 dropdown-menu 元素
• 如果用户没有输入 dropdown-menu 元素而是在没有输入 dropdown-menu 的情况下移出下拉列表，您的代码将不会删除打开类下拉菜单将保持可见

我觉得可以

$('.dropdown').hover(function () {
    $(this).addClass("open");
}, function () {
    $(this).removeClass("open");
});

演示:Fiddle