jQuery类交换未按预期运行

Question

I'm writing a script whose function is to convert a drop down menu to an accordion style menu depending on the screen width. To do this, the script swaps out class names based on the width. Visually, everything works as expected when the screen size changes. Also, if I open up the developer tools in chrome and adjust screen width, I can see the class names change in HTML.

Functionally, however, the browser seems to hold onto whatever class name it was when the page loaded. Here's the script:

$(function()
{       
    var screenWidth;
    var screenMode;
    var initial_check = 0;
    var currentMode;

    //check main window width
    function checkWidth()
    {
        screenWidth = $(window).width();

        //main size changes
        if (screenWidth >= 769)
        {
            screenMode = "large";
            changeDisplayMode("large");
        }
        else if (screenWidth < 769 && screenWidth > 350)
        {
            screenMode = "medium";
            changeDisplayMode("medium");
        }
        else if (screenWidth < 350)
        {
            screenMode = "medium";
            changeDisplayMode("medium");
        }

        //size change to stack View Cart items and search button
        if (screenWidth < 603)
        {
            //show search magnify glass

        }
    }

    //check width when entering page
    checkWidth();

    $(window).resize(checkWidth);


    /////////////////////////////////////////////////////////////////////////////////
    ///////////                                                               ///////
    ///////////   Code for navigation transition from drop down to accordion  ///////
    ///////////                                                               ///////
    /////////////////////////////////////////////////////////////////////////////////

    function changeDisplayMode(mode)
    {
        if (currentMode != mode)
        {
            if (mode == "large")
            {   
                //set on first launch
                initial_check = 1;

                if (initial_check == 1)
                {
                    $("#header_image").show();

                    $("nav").removeClass("nav_medium").addClass("nav_large");
                    $("div.main_menu_item_medium").removeClass("main_menu_item_medium").addClass("main_menu_item_large");
                    $("div.sub_menu_medium").removeClass("sub_menu_medium").addClass("sub_menu_large");
                    $("div.sub_menu_item_medium").removeClass("sub_menu_item_medium").addClass("sub_menu_item_large");
                }

                currentMode = "large";
            }
            else if (mode == "medium")
            {
                //set on first launch
                initial_check = 1;

                if (initial_check == 1)
                {
                    $("#header_image").hide();

                    $("nav").removeClass("nav_large").addClass("nav_medium");
                    $("div.main_menu_item_large").removeClass("main_menu_item_large").addClass("main_menu_item_medium");
                    $("div.sub_menu_large").removeClass("sub_menu_large").addClass("sub_menu_medium");
                    $("div.sub_menu_item_large").removeClass("sub_menu_item_large").addClass("sub_menu_item_medium");
                }   

                currentMode = "medium";
            }       
        }   
    }


    //hide inital dropdown menus
    $('.nav_large li ul').hide();       
    $('.sub_menu_large').hide();
    $('.nav_medium li ul').hide();      
    $('.sub_menu_medium').hide();

    //navigation hover in large mode
    $('.nav_large ul li').hover(

        function()
        {
            $('.sub_menu_large', this).show();
            console.log("large hover");
        },

        function()
        {
            $('.sub_menu_large', this).hide();
            console.log("large hidden");
        }

    );

    //navigation hover in medium mode
    $('.nav_medium ul li').hover(

        function()
        {
            $('.sub_menu_medium', this).show();
            console.log("medium hover");
        },

        function()
        {
            $('.sub_menu_medium', this).hide();
            console.log("medium hidden");
        }

    );

    //accordion style clicks in medium mode
    $('.nav_medium ul li').click (

        function()
        {
            $('.sub_menu_medium', this).show();
            console.log("clicked medium");
        }

    );


});

As you can see, there's a large and medium mode. If I load the page in large mode, adjust the browser to medium, and hover over an element, it still logs as it's in large mode. Same thing going from medium to large. As stated, I can see the HTML change correctly when viewing the source.

So, I guess I'm looking for some sort of refresh that doesn't reload the page? Is the class name cached somehow? I've tested this in chrome and firefox with identical results.

Answer 1

The problem is that you might be changing the size of the browser to test. However this approach will not work and will always give you the same width of the browser window no matter how much you reduce it.

In case you want to test it for different window sizes you need to do it through the Emulator of the browsers. In chrome you can press f12 and then Esc, you will get a tab named Emulation. set the screen size from there and test it