javascript - 在调整大小事件中禁用 superfish

Question

我正在尝试将 Superfish jQuery 插件与 Nathan Smith 的 adapt.js 片段相结合，后者根据浏览器宽度动态加载不同的 CSS 文件。我想在移动模式下禁用/替换/某些 Superfish 菜单，因为下拉菜单在那里没有任何意义。我试图检测更改并禁用菜单，但我需要在再次调整窗口大小时重新启用它。

这是我所拥有的:

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