小编Mic*_*rey的帖子

我试图jQuery在一个页面上使用2个导航脚本(Superfish用于桌面和FlexNav 移动设备).我目前正matchMedia与polyfillPaul Irish 一起使用来回应CSS3媒体查询状态的变化JavaScript.

目前的代码只实现了总体目标的50%.如果您最初访问网页的窗口大小等于或大于999px宽,那么您将获得Superfish并且如果您最初访问窗口大小小于999px的网页,那么您将获得FlexNav.当您将窗口调整大小或低于999px时,会发生此问题,因为两个脚本都变为活动状态.

// 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,但我对所有建议持开放态度.

更新:感谢Stephan的建议,我现在有以下代码:

jQuery(document).ready(function () {
    // add destroy function …