サイズ変更イベントでsuperfishを無効にする

Question

Nathan Smithのadapt.jsスニペットとSuperfish jQueryプラグインを組み合わせようとしています。ブラウザの幅に応じて異なるCSSファイルに動的に読み込まれます。私はドロップダウンが意味をなさないので、モバイルモードでは、スーパーフィッシュメニューを無効にする/置き換える/何かしたいです。私は変更を検出してメニューを無効にしようとしましたが、ウィンドウの幅を再び広げたときに再度有効にする必要があります。 、およびメニューを無効にするには、CSSに子孫セレクタを使用する -

function htmlId(i, width) { 
    document.documentElement.id = 'pagesize_' + i; 
} 

var ADAPT_CONFIG = { 
    path: '/css/', 
    dynamic: true, 
    callback: htmlId, 
    range: [ 
    '0px to 760px = mobile.css', 
    '760px = 960_12.css' 
    ] 
}; 

function sfMenu() { 
    $("#pagesize_1 ul.sf-menu").superfish({ 
     delay:  800, 
     animation: {opacity:'show'}, 
     speed:  'fast', 
     autoArrows: true, 
     dropShadows: true 
    }); 
} 

$(document).ready(function(){ 
    sfMenu(); 
}); 

根拠は（作品pagesize_0とpagesize_1間）resize上のHTML要素のIDを変更しました：

は、ここで私が持っているものですしかし、それは動作しません。私はsfMenu()をresize（上記のコードは表示されません）に再試行しましたが、変更されたDOMを検査するようには見えません。pagesize_1はもう存在しなくなりました（正常に機能しません）。

どのような考えですか？理想的には私はsuperfish関数をresize-to-mobileで破壊してから、画面が大きくなったときに再起動したいと考えています。

Answer 1

私は、水平ナビバースタイル（サブナビよりも広いウィンドウ）から垂直ドロップダウンスタイル（ウィンドウよりもサブナブが広い）からプレーンオールリスト（メインナビゲーションウィンドウより広い）。

それがどのようにエレガントわからないが、しかしエンドアンバインド（）とremoveAttr（「スタイル」）に私のためのドロップダウンを無効：

$(window).resize(function() { 
    if ($(this).width() < maxNavigationWidth) { 
     $('#neck .navigation').removeClass('sf-menu'); 
     $('.navigation li').unbind(); 
     $('.navigation li ul').removeAttr('style'); 
    } else { 
     $('#neck .navigation').addClass('sf-menu').addClass('sf-js-enabled'); 
     applySuperfish(); 
    } 
}); 

Answer 2

SUPERFISHは「破棄」メソッド（必ず最新の1.7を持っています.3バージョン）を無効にし、CSSメディアクエリを使用してナビゲーションのスタイルを変更することができます。あなたは再びそれを有効にしたいときにも、その後SUPERFISHの「initは」メソッドを呼び出すことができます。これはうまくいけば、私が話しているかを説明する必要があり

var sf, body; 
var breakpoint = 600; 
jQuery(document).ready(function($) { 
    body = $('body'); 
    sf = $('ul.sf-menu'); 
    if(body.width() >= breakpoint) { 
     // enable superfish when the page first loads if we're on desktop 
     sf.superfish(); 
    } 
    $(window).resize(function() { 
     if(body.width() >= breakpoint && !sf.hasClass('sf-js-enabled')) { 
      // you only want SuperFish to be re-enabled once (sf.hasClass) 
      sf.superfish('init'); 
     } else if(body.width() < breakpoint) { 
      // smaller screen, disable SuperFish 
      sf.superfish('destroy'); 
     } 
    }); 
}); 

について:)

http://cdpn.io/jFBtw