javascript - jQuery mouseleave 无法正常运行

Question

我正在尝试使用 jQuery 关闭下拉菜单，如果它在鼠标离开元素时打开。

这应该是小菜一碟，但就是行不通。我这样做是因为返回并以任何其他方式进行工作量太大。

这是一个很好的截图:

这是临时站点:
http://www.nickysfolders.com/?SessionThemeID=34

我应该能够删除 .open。 .open 没有被成功删除。

涉及的脚本如下(最后一个是问题所在):

$(document).on('click', 'a.dropdown-toggle', function(e) {
    $("div#drop-back-trigger").toggleClass("shadow");
    console.log("pressed");
    e.stopPropagation();
})
$('.dropdown-toggle').dropdown();
$('.dropdown-toggle').removeAttr('data-toggle');
$('.dropdown').hover(function() {
    $('.dropdown-toggle', this).trigger('click');
});
$('.dropdown.mega-dropdown').on('mouseleave', function() {
    if ($('.dropdown').hasClass('open')) {
        $('.dropdown').removeClass('.open');
        console.log('AWAKEN');
    }
});

我希望菜单的功能与任何其他可以通过悬停打开的菜单一样。不幸的是，下拉菜单没有关闭。

Answer 1

你打错了。去掉点“.”来自 .open

// Won't work. There is no class ".open"
$('.dropdown').removeClass('.open');

// Fix
$('.dropdown').removeClass('open');

更新: 最佳做法是从该特定元素中删除该类，以便您可以改用 this:

if ($(this).hasClass('open')) {
    $(this).removeClass('open');
}