jQuery mouseleaveが正しく機能していません

Question

jQueryを使用して、マウスが要素を離れるときに開いている場合はドロップダウンを閉じようとしています。

これはケーキですが、うまくいきません。私はそれをやっています。なぜなら、これは何か他の方法でやり直すにはあまりにも多くの作業が必要になるからです。

これは良いスクリーンショットです：私はちょうど.openを削除することができるはず
http://www.nickysfolders.com/?SessionThemeID=34

：

これは、ステージングサイトです。 .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'); 

からUPDATE： ベストプラクティスは、あなたの代わりにthisを使用することができますので、その特定の要素からクラスを削除するには、次のようになります。

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

Answer 2

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