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

Question

我试图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 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),我们可以删除它以隐藏它的所有样式,一个用于绑定javascript函数(它将始终保留在那里,或者我们无法重新附加它).

我通常喜欢在前面加上任何类似JS钩子的类js-,所以在我的例子中(下面)我用.flexnav菜单替换了菜单上的类.js-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/

让我知道这是否适合你!