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

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

我创建了一个 fiddle 来说明我在这里遇到的问题 https://jsfiddle.net/v5bgp389/18/ .我怎样才能基本上让代码忽略切换代码并在更大的屏幕上显示所有按钮？

Answer 1

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