モバイルとタブレットのホバーに関する問題

Question

ホバーメニューのモバイルとタブレットの問題に直面しています。ドロップダウンを開くには2回クリックする必要があります。モバイルとタブレットのサイズを修正する方法はわかりません。 /：私はない2回のクリックで、特定のドロップダウンを開くためにクリックするだけでメニューをしたい

$(".dropdown").hover(function() { 
    $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("800"); 
    $(this).toggleClass('open'); 
}, function() { 
    $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("800"); 
    $(this).toggleClass('open'); 
}); 
$(".dropdown-2").hover(function() { 
    $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideDown("800"); 
    $(this).toggleClass('open'); 
}, function() { 
    $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideUp("800"); 
    $(this).toggleClass('open'); 
}); 

： はここでホバー効果のために私のコードです。私はJavaScriptとjQueryの初心者ですから少しの説明も素晴らしいでしょう。ありがとうございました。

Answer 1

のみ窓/スクリーンサイズに基づいて、ホバー機能を起動するスクリプトに条件を追加します。

if($(window).width() > 1024) { 
    $(".dropdown").hover(function() { 
     $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("800"); 
     $(this).toggleClass('open'); 
    }, function() { 
     $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("800"); 
     $(this).toggleClass('open'); 
    }); 
    $(".dropdown-2").hover(function() { 
     $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideDown("800"); 
     $(this).toggleClass('open'); 
    }, function() { 
     $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideUp("800"); 
     $(this).toggleClass('open'); 
    }); 

} else { 
    $(".dropdown").click(function() { 
     $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("800"); 
     $(this).toggleClass('open'); 
    }, function() { 
     $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("800"); 
     $(this).toggleClass('open'); 
    }); 
    $(".dropdown-2").click(function() { 
     $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideDown("800"); 
     $(this).toggleClass('open'); 
    }, function() { 
     $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideUp("800"); 
     $(this).toggleClass('open'); 
    }); 

} 

チェックは画面サイズは1024個のピクセルが（これを変更することを偉大であるかどうかを確認するために行われていますどんなスイートでも）。

「はい」の場合、ホバー機能付きのドロップダウンが実行されます。いいえ（モバイル）、クリック機能でドロップダウンを実行します。

注： 大きな画面上の応答機能をテストする場合は、画面サイズが、それ以来変更されているかどうかをチェックします「リサイズ」機能を実行する必要があります。

function hoverOrClick() { 
if($(window).width() > 1024) { 
    $(".dropdown").hover(function() { 
     $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("800"); 
     $(this).toggleClass('open'); 
    }, function() { 
     $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("800"); 
     $(this).toggleClass('open'); 
    }); 
    $(".dropdown-2").hover(function() { 
     $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideDown("800"); 
     $(this).toggleClass('open'); 
    }, function() { 
     $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideUp("800"); 
     $(this).toggleClass('open'); 
    }); 

} else { 
    $(".dropdown").click(function() { 
     $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("800"); 
     $(this).toggleClass('open'); 
    }, function() { 
     $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("800"); 
     $(this).toggleClass('open'); 
    }); 
    $(".dropdown-2").click(function() { 
     $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideDown("800"); 
     $(this).toggleClass('open'); 
    }, function() { 
     $('.dropdown-menu-2', this).not('.in .dropdown-menu-2').stop(true, true).slideUp("800"); 
     $(this).toggleClass('open'); 
    }); 

} 
} 
hoverOrClick(); // Runs code the first time 

$(window).resize(function(){ 
hoverOrClick(); // Runs code again to see if screen size has changed 
}