jquery - 画面サイズに応じてjQuery Superfishメニューのホバーまたはトグル

Question

レスポンシブ メニューを開発しており、画面サイズが 767px より大きい場合はホバー時にメニューを表示し、画面サイズが 767px より小さい場合はトグルで開くようにしたいと考えています。

画面サイズに基づいて eventType のデフォルト設定を変更する方法はありますか? つまり、何らかの方法でコードに挿入できるメディア クエリはありますか?

Github で Karl Swedberg のバージョンの Superfish を使用しています。

https://gist.github.com/917446

Answer 1

画面サイズを確認してください。

var $width = $(window).width();

次に、負荷をテストします。

$(function(){
    var $width = $(window).width();

    if($width > 767){
        // do hover
    } else {
        // do toggle
    }
});

または、ウィンドウのサイズ変更時に呼び出す必要があるため、外部関数に貼り付けることもできます。

function checkWidth($width){
    if($width > 767){
        // do hover
    } else {
        // do toggle
    }
}

$(function(){
    checkWidth($(window).width());
});

$(window).on('resize',function(){
    checkWidth($(this).width());
});

Answer 2

条件ステートメントを使用して、画面のサイズを確認し、それに応じてイベントをバインドできます。あなたは.bind()それのために使うことができます。ドキュメントを参照してください。

Answer 3

検討したいもう 1 つのオプションは、Superfish v1.5.9 を使用することです。これは、タップを自動的に使用してタッチ デバイスのサブメニューを開き、同時にマウス ホバーとキーボード ナビゲーションをサポートします。