在除桌面之外的所有断点中运行 jquery

Question

我只有最少的代码知识，我正在努力实现一些目标。 我只希望它适用于较小的设备——基本上小于桌面尺寸。 这是我的代码

$('.menu-button').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
     $("body").css("overflow", "auto");
  } else {
     $("body").css("overflow", "hidden");
  }
  $(this).data("clicks", !clicks);
});

 $('.nav-background, .nav__link, .primary-button').click(function() {
  $( ".menu-button" ).click();

});

Answer 1

有一千种方法可以做到这一点，因为你似乎没有使用任何给你“断点”和“小于桌面”的 css 框架是非常不精确的，我将向你展示一种使用 css 和 javascript 的方法

例如，在您的 html 中只有一个具有特定 id 的空元素

<div id="resolution_check"></div>

在您的 css 中，您定义了一个媒体查询和断点，并在宽度较小时将此元素设置为不显示。 例如

@media only screen and (max-width: 760px) {
  #resolution_check { display: none; }
}

在您的 javascript 中，您现在可以检查此元素是否设置为不显示，如果是，则用户分辨率小于 761px

var small_screen = $('#resolution_check').css('display')=='none';

下面将遵循您的代码，您可以在其中检查上面的 var，例如：

$('.menu-button').click(function() {
   if(!small_screen){ // if NOT small screen return
     return false; 
   }
 ...

此外，在调整大小事件时，您需要再次设置 small_screen，因为宽度已更改