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的選項卡。從那裏設置屏幕尺寸並進行測試