Question

我想要做的是从下拉列表中删除打开的类，以便菜单显示在悬停而非点击，但我无法将其删除。也许我不明白这是如何工作的。我所知道的是，我设法做到了直到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

从父元素中删除类

1 个答案: