在調整大小事件時禁用超級魚

Question

我正在嘗試將 Superfish jQuery 插件與 Nathan Smith 的 adapt.js 片段結合起來，該片段根據瀏覽器寬度動態加載到不同的 CSS 文件中。 我想在移動模式下禁用/替換/某些 Superfish 菜單，因為下拉菜單在那里沒有任何意義。 我試圖檢測更改並禁用菜單，但是當 window 再次調整寬度時，我需要重新啟用它。

這是我所擁有的：

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();
});

基本原理是在resize時更改 html 元素的 id（在pagesize_0和pagesize_1之間 - 有效），並在 CSS 中使用后代選擇器來禁用菜單，但這不起作用。 我嘗試在resize時重新運行sfMenu() （上面未顯示代碼），但它似乎沒有檢查更改的 DOM，意識到pagesize_1不再存在，然后優雅地失敗（我認為這會達到我想要的效果）。

有什么想法嗎？ 理想情況下，我想在 resize-to-mobile 上摧毀超級魚superfish ，然后在屏幕再次變大時重新恢復它。

Answer 1

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

Answer 2

我一直在玩同樣的事情，從水平導航欄樣式（窗口比子導航寬）到垂直下拉樣式（子導航比窗口寬）到純 ol-list（主導航比窗口寬） .

不確定它有多優雅，但最后 unbind() 和 removeAttr('style') 為我禁用了下拉菜單：

$(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();
    }
});