Переключение класса JQuery не действует как ожидалось

Question

Я пишу скрипт, функция которого состоит в том, чтобы преобразовать выпадающее меню в меню стиля аккордеона в зависимости от ширины экрана. Для этого сценарий заменяет имена классов по ширине. Визуально все работает так, как ожидается при изменении размера экрана. Кроме того, если я открою инструменты разработчика в chrome и отрегулирую ширину экрана, я вижу, что имена классов изменяются в HTML.

Функционально, однако, браузер, похоже, поддерживает любое имя класса, которое было при загрузке страницы. Вот сценарий:

$(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"); 
     } 

    ); 


}); 

Как вы можете видеть, есть режим large и medium. Если я загружаю страницу в большом режиме, настройте браузер на средний и наведите указатель мыши на элемент, он все равно регистрируется, так как он находится в большом режиме. То же самое происходит от среднего до большого. Как было сказано, я вижу, что изменение HTML правильно при просмотре источника.

Итак, я предполагаю, что я ищу какое-то обновление, которое не перезагружает страницу? Является ли имя класса кэшированным каким-то образом? Я протестировал это в chrome и firefox с одинаковыми результатами.

Answer 1

Проблема в том, что вы можете изменить размер браузера для проверки. Однако этот подход не будет работать и всегда будет давать вам ту же ширину окна браузера, независимо от того, насколько вы его уменьшите.

Если вы хотите протестировать его для разных размеров окон, вам необходимо сделать это через браузеры Emulator. В chrome вы можете нажать f12, а затем Esc, вы получите вкладку с именем Emulation. установите размер экрана оттуда и проверьте его