我正在尝试jQuery
在一页上使用 2 个导航脚本(Superfish
用于台式机和FlexNav
移动设备)。我目前matchMedia
与 Paul Irish 一起使用来polyfill
响应.CSS3
JavaScript
当前的代码只完成了总体目标的 50%。如果您最初使用等于或大于 999px 宽的窗口大小访问网页,那么您会得到Superfish
,如果您最初使用小于 999px 的窗口大小访问网页,那么您会得到FlexNav
. 当您将窗口大小调整为高于或低于 999 像素时,会出现此问题,因为这两个脚本都处于活动状态。
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(min-width: 999px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
$("ul.sf-menu").superfish({
delay: 350,
speed: 400,
});
} else {
$("ul.flexnav").flexNav({
'animationSpeed': '250',
'transitionOpacity': true,
'buttonSelector': '.menu-button',
'hoverIntent': false
});
}
}
尽管我很想与它一起工作matchMedia
,但我对所有建议持开放态度。
更新:感谢斯蒂芬的建议,我现在有以下代码:
jQuery(document).ready(function () {
// add destroy function for FlexNav
flexNavDestroy = function () {
$('.touch-button').off('touchstart click').remove();
$('.item-with-ul *').off('focus');
}
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(min-width: 999px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
if (typeof (flexNav) != "undefined") {
flexNavDestroy();
}
superfish = $("ul.sf-menu").superfish({
delay: 350,
speed: 400,
});
} else {
if (typeof (superfish) != "undefined") {
superfish.superfish('destroy');
}
flexNav = $("ul.flexnav").flexNav({
'animationSpeed': '250',
'transitionOpacity': true,
'buttonSelector': '.menu-button',
'hoverIntent': false
});
}
}
});
剩余问题:
的销毁功能FlexNav
只是部分销毁它。