我试图在一个页面上使用2个jQuery导航脚本(适用于桌面的Superfish和适用于移动设备的FlexNav).我目前正在使用matchMedia和Paul Irish的polyfill来响应JavaScript中的CSS3媒体查询状态更改.

目前的代码只实现了总体目标的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 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的销毁功能只是部分破坏它.

解决方法:

最好的方法可能是在激活其他插件时销毁另一个插件.

如果我查看Superfish的源代码,就会有一个destroy函数来执行此操作,但flexNav没有这样的功能.你可以创建一个：

flexNavDestroy = function(){
    $('.touch-button').off('touchstart click').remove();
    $(('.item-with-ul *').off('focus');
}

然后你可以这样做：

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
        });
    }
}

UPDATE
我对FlexNav的看法有点多了,我错过了一些东西.

我认为样式是碰撞的,因为FlexNav默认设置了很多样式.我们可以通过使用两个类来轻松地防止这种情况：一个用于flexnav样式(默认.flexnav),我们可以删除它以隐藏它的所有样式,一个用于绑定javascript函数(它将始终保留在那里,或者我们不能重新 – 它).

我通常喜欢在js-之前添加任何与JS挂钩的类,所以在我的示例(下面)中,我用.js-flexnav替换菜单上的.flexnav类.然后要激活flexnav,你必须在调用$(‘ul.flexnav’)之前添加这一行.flexNav()

$('.js-flexnav').addClass('flexnav');

在destroy函数中,你将不得不再次删除该类,我将很快显示.

另外,我不确定Superfish是如何进行显示和隐藏的,但是由于FlexNav会折叠所有子菜单,因此可以安全地说你应该重新显示它们以便Superfish可以做到这一点.

更新的destroy函数反映了这一点：

function flexNavDestroy(){
    $('.touch-button').off('touchstart click').remove();
    $('.item-with-ul *').off('focus');
    $('.js-flexnav').removeClass('flexnav').find('ul').show(); // removes .flexnav for styling, then shows all children ul's
}

这是一个jsFiddle,显示使用新代码激活/停用flexNav：http://jsfiddle.net/9HndJ/

让我知道这是否适合你！