[英]Disable superfish on resize event
我正在尝试将 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
,然后在屏幕再次变大时重新恢复它。
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');
}
});
});
这应该有望解释我在说什么:)
我一直在玩同样的事情,从水平导航栏样式(窗口比子导航宽)到垂直下拉样式(子导航比窗口宽)到纯 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();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.