JS - 窗口寬度功能不起作用

所以我有一個響應式導航菜單。一個按鈕用於切換菜單進出。這工作正常。JS - 窗口寬度功能不起作用

我添加了一個異常，如果窗口超過一定的寬度，菜單關閉，但這根本不起作用。我找不到這個代碼有什麼問題。

JS：

$(document).ready(function(){ 
    $(".menubutton").click(function(){ 
     $(".respmenu-gen").toggleClass("respmenu-opn respmenu-cls"); 
    }); 
    if ($(window).width() > 767) { 
     $(".respmenu-gen").removeClass("respmenu-opn").addClass("respmenu-cls") 
    }; 
});

的jsfiddle： https://jsfiddle.net/76amgsb8/

謝謝！

來源

2016-05-10 Arman Haque

你有一個視口meta標籤嗎？如果是這樣，它說什麼？ – Ukuser32

yup： –

您是否只關心頁面加載時發生的行爲？ – lomteslie

您應該使用window.resize()方法。檢查出來here。

你在這裏實質上是做什麼的，當內容加載你檢查窗口的寬度，只是一次。你應該被綁定在resize事件上。

所以，你基本上可以做到以下幾點：

$(window).resize(function() { 
    var viewportWidth = $(window).width(); 
    if (viewportWidth > 767) 
     $(".respmenu-gen").removeClass("respmenu-opn").addClass("respmenu-cls") 
}); 

$(document).ready(function(){ 
    $(".menubutton").click(function(){ 
     $(".respmenu-gen").toggleClass("respmenu-opn respmenu-cls"); 
    }); 
});

如果你一定用JavaScript工作有關的反應，我會建議雖然使用window.matchMedia(mediaQueryString)方法，因爲依靠jQuery的resize()不會放棄你確切的結果。 window.matchMedia()更強大，您還可以從熟悉的CSS3媒體查詢中受益。 https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

更新

要始終依靠CSS3媒體查詢，但並沒有JavaScript的（除非你想達到的東西，是不可能通過CSS和唯一的解決辦法是JavaScript的）。

來源

2016-05-10 14:37:43 gdyrrahitis

aha！是完美的。調整大小（）的竅門！不會想到它......看着matchMedia（）的方式。看起來很厲害！肯定會在將來的項目中使用 –

這個加載在初始頁面上加載了嗎？ – Ukuser32

這也可以用CSS媒體查詢來完成，例如使用它來將css設置爲.respmenu-opn。由於您不更改類，打開的菜單將在您提高/降低窗口寬度時關閉/重新打開：https：//jsfiddle.net/76amgsb8/1/ – yezzz

-1

使用下面的代碼：

var window_width = $(window).width(); 
if (window_width < 767) { 
    $(".respmenu-gen").removeClass("respmenu-opn").addClass("respmenu-cls"); 
}

來源

2016-05-10 14:32:52 user2517200

看起來很有前途......但唉，沒成功 –

在jsfiddle或codepen中插入完整的代碼以獲得更好的幫助 – user2517200

JS - 窗口寬度功能不起作用

回答

相關問題