javascript - 根据窗口宽度在 Superfish 和 FlexNav 之间切换

Question

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

目前的代码只完成了总体目标的 50%。如果您最初访问网页时窗口大小等于或大于 999px 宽，那么您会得到 Superfish，如果您最初访问网页时窗口大小小于 999px，那么您会得到 弹性导航。当您将窗口大小时调整到高于或低于 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 的销毁函数只是部分销毁它。

Answer 1

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

如果我查看 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
        });
    }
}

更新我对 FlexNav 进行了更多的研究，但我遗漏了一些东西。

我认为样式会发生冲突，因为 FlexNav 默认设置了很多样式。我们可以通过使用两个类轻松地防止这种情况:一个用于 flexnav 样式(默认 .flexnav)，我们可以删除它以隐藏它的所有样式，另一个用于绑定(bind) javascript 函数(将始终保留在那里) ，否则我们无法重新附加它)。

我通常喜欢在任何作为 JS 钩子(Hook)的类前面加上 js-，所以在我的示例(下面)中，我替换了菜单上的 .flexnav 类使用 .js-flexnav。然后要激活 flexnav，您必须在调用 $('ul.flexnav').flexNav()

之前添加这一行

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

在 destroy 函数中，您将不得不再次删除该类，我将在稍后展示。

此外，我不确定 Superfish 是如何显示和隐藏的，但是由于 FlexNav 折叠了所有子菜单，所以可以肯定地说您应该重新显示它们，以便 Superfish 可以自己做事。

更新的 destroy 函数反射(reflect)了这一点:

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/

如果这对您有用，请告诉我!