在resize事件上禁用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();
});

理由是改变html元素的id resize(在pagesize_0和之间pagesize_1- 有效),并在CSS中使用后代选择器来禁用菜单,但这不起作用.我试着重新运行sfMenu()在resize(代码上面没有显示),但它似乎并没有检查改变DOM,实现pagesize_1不再存在,则无法正常(我认为会达到的效果,我后).

有什么想法吗？理想情况下,我想破坏superfish调整大小到移动设备的功能,然后在屏幕再次变大时重新启动它.

Answer 1

SuperFish有一个'destroy'方法(当然在最新的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