Question

我有一小段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();
    });
}

Answer 1

你可以使用这样的resize函数包装器：

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>

Answer 2

你可以使用

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


));

Answer 3

只需调用页面上的调整大小功能

$(document).ready(function($) {
    $(window).resize(YourFunctionName);
    $(window).resize();
 });

 function YourFunctionName() {
          // Here is your code which you want to run automatically on page resize.
  }

调整大小后检查浏览器宽度，无需重新加载（Javascript）

3 个答案:

您的具体案例

摘录