僅在較小的屏幕上切換導航

我有一個在大屏幕上完整顯示的菜單。但是，對於1024像素到1400像素之間的屏幕，我希望隱藏屬於此菜單的社交圖標，並只在點擊按鈕時顯示它們。這工作正常，但點擊按鈕後顯示它們，如果我然後調整窗口的大小更大的按鈕不再顯示。理想情況下，當屏幕在1024像素和1400像素之間時，展開社交圖標按鈕將顯示，讓我可以在點擊該按鈕時看到我的社交按鈕，但是當將窗口調整爲更大尺寸時，它應該自動隱藏展開社交圖標按鈕並顯示它們除了點擊展開社交圖標按鈕之後，然後將窗口調整到更大的屏幕，社交按鈕不會顯示。僅在較小的屏幕上切換導航

這是我的切換jQuery代碼：

jQuery.fn.clickToggle = function (a, b) { 
    function cb() { 
    [b, a][this._tog ^= 1].call(this); 
    } 
    return this.on("click", cb); 
}; 

$(".header-social-trigger").clickToggle(function() { 
    $('.header-social').css("cssText", "display: table-cell!important"); 
    $('.dg-button, .mnr-header-button').css("cssText", "display: none"); 
    $('.header-social-trigger .icon').removeClass("ion-android-share-alt"); 
    $('.header-social-trigger .icon').addClass("ion-close"); 
}, function() { 
    $('.header-social').css("cssText", "display: none"); 
    $('.dg-button, .mnr-header-button').css("cssText", "display: table-cell"); 
    $('.header-social-trigger .icon').removeClass("ion-close"); 
    $('.header-social-trigger .icon').addClass("ion-android-share-alt"); 
});

我創建了說明這個問題，我在這裏遇到一個https://jsfiddle.net/v5bgp389/18/小提琴。我怎麼能讓代碼忽略切換代碼並在大屏幕上顯示所有按鈕？

來源

2017-07-03 Paulo

請打破這幾個較短刑期，我入睡到達最終:-)「理想的情況是，當屏幕1,024像素和1400px之間展開社交圖標按鈕，會顯示讓我看到我的社交之前按鈕，然後在將窗口調整爲更大尺寸時，它應該自動隱藏展開的社交圖標按鈕，並在點擊展開社交圖標按鈕後將其全部顯示出來，然後將窗口大小調整爲更大的屏幕不顯示「。 – Cristina

/*Change Css*/ 
     @media screen and (max-width: 1024px) { 
      .header-social-trigger { 
       display: table-cell !important; 
       background-color: #e0771a !important; 
       border-left: 0 !important; 
      } 

       .header-social-trigger:hover { 
        background-color: #f1811e !important; 
       } 

      .header-social { 
       display: none !important; 
      } 
     } 

    @media screen and (min-width: 1024px) { 
      .header-social-trigger { 
       display:none !important; 
       background-color: #e0771a !important; 
       border-left: 0 !important; 
      } 

       .header-social-trigger:hover { 
        background-color: #f1811e !important; 
       } 

      .header-social { 
       display: table-cell !important; 
      } 
     }

來源

2017-07-03 12:33:34

類似：

if($(window).width() > 1024 && $(window).width() < 1400){ 
    //screen width between 1024 and 1400px 
} 
else{ 
    //other screen sizes 
}

？

來源

2017-07-03 12:24:17 Remling

僅在較小的屏幕上切換導航

回答

相關問題