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

语法：$(selector).mouseleave(function)

$('.dropdown.mega-dropdown').mouseleave(function() {})

Rerefence jQuery event mouseleave

$(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').mouseleave(function() {
    if($('.dropdown').hasClass('open')) {
        $('.dropdown').removeClass('open');   
console.log('AWAKEN');
    }
    });

Answer 2

你有一个错字配偶。删除点“。”来自.open

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

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

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

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