javascript - サブメニューを遅らせる

Question

スクリプトを作成しました。ナビゲーションで私のサブメニューを開きます。サブメニューからマウスを離したとき。サブメニューは 300ms の遅延で閉じる必要があります。しかし、遅延は機能していません。どうすればこれを修正できますか? これは私のスクリプトです：

$('.nav-main .container li').hover(function() {
    if ($(this).find('.submenu').length > 0) {
        $(this).addClass("hover");
        $(this).find('.submenu').show();
    }
}, function() {
    $(this).find('.submenu').delay(300).hide();
    $(this).removeClass("hover");
});

Answer 1

次のコードはテストしていませんが、動作するはずです...

$('.nav-main .container li').hover(function() {
    if ($(this).find('.submenu').length > 0) {
        $(this).addClass("hover");
        $(this).find('.submenu').show();
    }
}, function() {
    var submenu = $(this).find('.submenu');
    setTimeout(function() {
      submenu.hide();
    }, 300);
    $(this).removeClass("hover");
});

Answer 2

setTimeout() メソッドを作成する必要があります。また、関数内で使用するオブジェクトを定義する必要があります $(this) は null になります。

$('.nav-main .container li').hover(function() {
    if ($(this).find('.submenu').length > 0) {
        $(this).addClass("hover");
        $(this).find('.submenu').show();
    }
}, function() {
    var object = $(this);
    setTimeout(function()
    {
        $(object).find('.submenu').hide();
        $(object).removeClass("hover");
    }, 300);
});