基於“屏幕寬度”的jQuery條件

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>