调整大小后检查浏览器宽度，不重新加载(Javascript)
调整大小后检查浏览器宽度，不重新加载(Javascript)
提问于 2014-10-23 08:28:49
我有一小块Javascript，它检查加载的浏览器的宽度，并根据结果运行一段jQuery。这将在移动设备上显示不同的菜单。
但是，用户可能会从桌面上的一个非常小的浏览器开始，运行jQuery (因此也会运行移动菜单)。如果他然后调整到全屏，菜单不会改变，因为浏览器的宽度检查不会再次运行。
问题:我如何调整Javascript，使其在每次调整浏览器大小时都会检查呢？
我的代码：
if (window.innerWidth <= 992) {
jQuery(document).ready(function($) {
$(".main-menu").hide();
$(".mobile-nav-button").click(function() {
$(".main-menu").slideToggle(500);
});
});
}
else {
jQuery(document).ready(function($) {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
});
}回答 3
Stack Overflow用户
回答已采纳
发布于 2014-10-23 08:30:04
您可以使用如下所示的调整大小函数包装：
function resize(){
// do all your stuff here
}然后在页面加载时调用它一次，并在每个调整大小的事件中召回它：
$(document).ready(function(){
resize();
$(window).resize(resize);
});与包装器不同，您还可以使用匿名函数($(window).resize(function(){/*Do stuff here*/}))，但是不能在加载页面时调用函数，因此必须自己重复。
你的具体案例
在你的具体情况下，你必须拿出文件准备。以下是它的外观：
function resize(){
// First we need to show all, then we will selectively hide based on page width
$(".main-menu, .mobile-nav-button, .mobile-cart-button").show();
if (window.innerWidth <= 992) {
$(".main-menu").hide();
// also, because you bind a click event here, you'll need to unbind it every time
// otherwise it will be executed multiple times after a couple of resizes
// (you could also do what @david does and move this into the document.ready below)
$(".mobile-nav-button").off("click").click(function() {
// slideToggle will toggle display of an element, but because its wrapped in click()
// it only gets executed onclick, not resize. Also, you don't want animation on resize.
$(".main-menu").slideToggle(500);
});
} else {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
}
}
$(document).ready(function(){
resize();
$(window).resize(resize);
});小片段
下面是代码工作的代码片段。我将宽度缩小到700个像素，这样就可以看到屏幕差异较小的效果(因为这是代码片段编辑器的外观)，但它都能工作。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="mobile-nav-button">Mobile Nav Button</div>
<div class="mobile-cart-button">Mobile CART Button</div>
<div class="main-menu">MAIN MENU</dov>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function resize(){
$(".mobile-nav-button, .mobile-cart-button, .main-menu").show();
if (window.innerWidth <= 700) {
$(".main-menu").hide();
$(".mobile-nav-button").off("click").click(function() {
$(".main-menu").slideToggle(500);
});
} else {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
}
}
$(document).ready(function(){
resize();
$(window).resize(resize);
});
</script>
</body>
</html>
Stack Overflow用户
发布于 2014-10-23 08:34:16
您可以使用
jQuery(document).ready(function($) {
$(".mobile-nav-button").click(function() {
$(".main-menu").slideToggle(500);
});
$(window).resize(function()
{
if (window.innerWidth <= 992) {
$(".main-menu").hide();
}
else {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
}
));
$(window).resize();
));Stack Overflow用户
发布于 2014-10-23 08:53:49
只需调用pageLoad上的调整大小函数
$(document).ready(function($) {
$(window).resize(YourFunctionName);
$(window).resize();
});
function YourFunctionName() {
// Here is your code which you want to run automatically on page resize.
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26524096
复制相关文章
相似问题
腾讯云开发者
