仅在较小的屏幕上切换导航

我有一个在大屏幕上完整显示的菜单。但是，对于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

仅在较小的屏幕上切换导航

回答

相关问题