将功能划分为屏幕尺寸

Question

以下代码会影响我的导航

let opened = false; // set the nav as closed by default
function toggleNav() {
  if (!opened) { // if opened is false (ie nav is closed), open the nav
    openNav()
  } else { // else, if opened is true (ie nav is open), close the nav
    closeNav();
  }
  opened = !opened; // negate boolean to get opposite (t to f, and f to t)
}

function openNav() {
  $('#myTopnav').addClass('openHeight').removeClass('closeHeight');
  $('#main').addClass('openMain').removeClass('closeMain');
}

function closeNav() {
  $('#myTopnav').removeClass('openHeight').addClass('closeHeight');
  $('#main').removeClass('openMain').addClass('closeMain');
}

我希望 openNav 和 closeNav 函数影响小于 720 像素的屏幕尺寸，我希望为更大的屏幕尺寸设置不同的 openNav 和 closeNav 函数。我不确定如何应用 if 和 else 语句来实现这一点。

编辑：抱歉，这是一个 Wordpress 网站，所以我不确定 php 是否会成为建议解决方案的一部分

Answer 1

您可以使用窗口调整大小功能：

$(window).resize(function(){
  if ($(this).width() >= 1280) {
     //Your Code Here
  }
});

当您的窗口大小为 >= 1200 时，上述功能将起作用

在你的场景中它会是这样的：

  //For Example You want to toggle your nav here
  if ($(window).width() > 720) {
     toggleNav2(); //Which you have created for less than 720px screen
  }else{
     toggleNav1(); //Which you have created for larger than 720px screen
  }