jQuery mouseleave is not functioning properly

Question

I am trying to use jQuery to close a drop-down if it is open when the mouse leaves the element.

This should be a piece of cake but it's just not working. I am doing it this way because it would be too much work to go back and do it any other way.

This is a good screenshot:

This is the staging site:
http://www.nickysfolders.com/?SessionThemeID=34

I should just be able to remove .open . .open is not being successfully removed though.

These are the scripts involved (the last one is the problem):

$(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');
    }
});

I would like the menu to function like any other menu which can be opened via hover. Unfortunately the drop-downs are not closing.

Answer 1

Syntax : $(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

You have a typo mate. Remove the dot "." from .open

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

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

UPDATE: Best practice would be to remove the class from that specific element so you can use this instead:

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