Question

我是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();
            });
        });
      });

Answer 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...
   }
}

Answer 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();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

2 个答案: