Switch between Superfish and FlexNav depending on window width

Question

I am trying to use 2 jQuerynavigation scripts on one page ( Superfishfor desktop computers and FlexNavfor mobile devices). I am currently using it matchMediawith polyfillPaul Irish to respond to CSS3changes in the status of a media request internally JavaScript.

The current code fulfills only 50% of the overall goal. If you first enter a web page with a window size equal to or greater than 999px, then you will receive Superfish, and if you first access a web page with a window size less than 999px, then you will receive FlexNav. The problem occurs when you resize the window above or below 999px, when both scripts become active.

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

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

UPDATE FlexNav, , .

, , FlexNav . , : flexnav ( .flexnav), , , javascript ( , ).

, JS- js-, () .flexnav .js-flexnav. , flexnav, , $('ul.flexnav').flexNav()

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

destroy , .

, , Superfish , FlexNav , , , Superfish .

, :

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/

, !

Answer 2

:

:

jquery, &

$menucontainer= $("#menu_container");
$memufish = $menucontainer.find(".menu");
$menuflex=$menufish.clone();

$menufish.superfish().detach();
$menuflex.prependTo($menucontainer).flexnav().detach(); 

( , , , - , , DOM),

/

$menuflex.prependTo($menucontainer);    

$menufish.detach();
$menuflex.prependTo($menucontainer);

, ( ), , clone() detach() . , - , ( script, - ) ( re - detach() )

:

:

• script ,

• , ,