基于“屏幕宽度”的jQuery条件答案

【问题标题】：JQuery conditions based on "screen width"基于“屏幕宽度”的jQuery条件
【发布时间】：2019-04-09 06:31:20
【问题描述】：

我是 Javascript/JQuery 的超级新手，但我无法弄清楚如何做到这一点。我想将它添加到我在课堂上工作的响应式网站。

我设置了一个汉堡菜单，可以隐藏/显示我的菜单，效果很好。问题是我只希望 Javascript 在 414px 或更小的屏幕宽度上运行。我的菜单是隐藏的，直到我点击汉堡包。

对于 415 像素及以上的屏幕，我不希望它隐藏我的菜单，或显示汉堡包和“X”。如果需要，我可以使用媒体查询轻松隐藏“X”和汉堡包，但我仍然需要显示我的菜单。

我试图添加一个事件加载器，但一定是做错了什么，因为一切都打开了（X、汉堡包和菜单），点击什么也没做。请帮我弄清楚如何使这项工作。我对此非常熟悉，所以任何指针都将不胜感激。提前谢谢

    // Hamburger menu
    $(document).ready(function () {

        $(".cross").hide();
        $(".menu").hide();
        $(".hamburger").click(function () {
            $(".menu").slideToggle("slow", function () {
                $(".hamburger").hide();
                $(".cross").show();
            });
        });

        $(".cross").click(function () {
            $(".menu").slideToggle("slow", function () {
                $(".cross").hide();
                $(".hamburger").show();
            });
        });
      });

【问题讨论】：

我认为你误解了 JavaScript 是什么。你想禁用它，为什么？
如果您可以提供随附的 HTML 标记（理想情况下是显示您当前实现中出了什么问题的 sn-p），我们将更容易帮助调试您的脚本。
@GiovaniVercauteren，我认为 Mtullis 并不是要在浏览器中“禁用”JS，只是有条件地运行脚本。
window.innerWidth 以像素为单位提供宽度。

标签： javascript jquery

【解决方案1】：

您可以使用Jquery width() 获取当前页面宽度，并将其作为条件。

$(document).ready(function() {
   WindowWidth = $(window).width();
   if (WindowWidth < 415){
      do logic...
   }
   else {
      do other logic...
   }
}

但请记住，人们经常调整屏幕大小，因此您也需要处理这些问题。

$(window).resize(function () {
   WindowWidth = $(window).width();
   if (WindowWidth < 415){
      do logic...
   }
   else {
      do other logic...
   }
}

【讨论】：

【解决方案2】：

基于@m4dm0nk3y

我通常在函数中提取公共代码并在ready 上调用它，然后在resize 上调用它。

function alignStuff() {

  WindowWidth = $(window).width();

  if (WindowWidth < 415) {
    console.log('small');
  } else {
    console.log('large');
  }
}

$(document).ready(function() {
  alignStuff();
})

$(window).resize(function() {
  alignStuff();
})

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：