Question

我有一个菜单，可以在更大的屏幕上显示。但是对于1024px和1400px之间的屏幕，我希望隐藏属于此菜单的社交图标，并且只在单击按钮时显示它们。这工作正常，但点击显示它们的按钮，然后我将窗口调整到更大的尺寸，按钮不再显示。理想情况下，当屏幕在1024px和1400px之间时，将显示扩展社交图标按钮，允许我在点击该按钮时看到我的社交按钮，但是当将窗口调整为更大尺寸时，它应该自动隐藏展开社交图标按钮并显示它们除了点击展开社交图标按钮，然后将窗口调整为更大的屏幕，社交按钮才会显示。

这是我的切换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/。我怎么能基本上让代码忽略切换代码并在更大的屏幕上显示所有按钮？

Answer 1

类似的东西：

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

Answer 2

/*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;
            }
        }

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

2 个答案: