JQuery resize() 窗口放大或缩小答案

【问题标题】：JQuery resize() on window scale up or scale downJQuery resize() 窗口放大或缩小
【发布时间】：2018-03-20 12:17:49
【问题描述】：

我有这段代码可以在点击按钮时显示/隐藏菜单

$('#main-menu ul').slideToggle();

当浏览器窗口小于 767 px 时菜单被隐藏，所以这个按钮会出现，它可以打开和关闭它，除了唯一的问题是当我再次调整窗口大小时，菜单消失了，如果切换幻灯片已将其设置为不显示。为了解决这个问题，我添加了代码以在浏览器调整大小后显示菜单。当浏览器窗口再次缩小到小于 767 像素时，这会导致显示新菜单，而不是隐藏默认菜单。然后，当缩放小于 767 像素时，我可以再次隐藏菜单，但这会导致菜单在隐藏时闪烁。

我想知道一种方法来检测 resize() 是否正在按比例放大，在这种情况下，缩小时我可以隐藏（）菜单，放大时我可以显示（）菜单。

$('.menu-button').click(function() {
    $('#main-menu ul').slideToggle();
});



    $(window).resize(function(){
                var w = $(window).width();
                if(w > 767 && $('#main-menu ul').is(':hidden')) {
                    $('#main-menu ul').show();
                }
            });




    $(window).resize(function(){
                var w = $(window).width();
                if(w < 767) {
                    $('#main-menu ul').hide();
                }
            });

【问题讨论】：

为什么不直接使用css根据屏幕witdh来隐藏和显示？此外，您不需要添加 2 个侦听器。只需将您的 w
我正在创建一个按钮，用于切换菜单，让用户在浏览器为时显示或隐藏
如果小于 767，您可以只显示按钮，然后单击将类添加到覆盖媒体查询声明的菜单。除非你真的想要动画，这几乎是使用 jquery 的唯一原因。

标签： jquery responsive-design

【解决方案1】：

您需要存储之前的尺寸，并据此决定调整大小是增加还是减少。

jQuery(function($) {
    // Cache a reference to $(window), for performance, and get the initial dimensions of the window
    var $window = $(window),
        previousDimensions = {
            width: $window.width(),
            height: $window.height()
        };

    $window.resize(function(e) {
        var newDimensions = {
            width: $window.width(),
            height: $window.height()
        };

        if (newDimensions.width > previousDimensions.width) {
            // scaling up
        } else {
            // scaling down
        }

        // Store the new dimensions
        previousDimensions = newDimensions;
    });
});

要在调整浏览器窗口大小并且用户选择显示它时保持菜单可见，您只需要存储一个标志，说明用户选择使其可见：

$('.menu-toggle-button').click(function(e) {
    var $menu = $('#main-menu ul');

    if (!$menu.data('keepVisible')) {
        $menu
            .data('keepVisible', true); // Store the user's choice (show the menu)
            .slideDown(); // Show the menu
    } else {
        $menu
            .data('keepVisible', false); // Store the user's choice (hide the menu)
            .slideUp(); // Hide the menu
    }
});

$(window).resize(function() {
    var $menu = $('#main-menu ul');

    if ($(window).width() < 767) {
        // Window is smaller than 767 pixels wide
        if (!$menu.data('keepVisible')) {
            // Hide the menu if it hasn't been kept visible by the user
            $menu.hide();
        }
    } else if ($menu.is(':hidden') || $menu.data('keepVisible')) {
        Window is larger than 767 pixels wide and the menu is invisible OR has been shown manually by the user
        $menu
            .data('keepVisible', false) // Reset the user's choice
            .show(); // Show the menu
    }
);

（请注意，使用这种技术，确定窗口是变大还是变小的代码块是完全没有必要的）

【讨论】：

这是什么意思？ previousDimensions = newDimensions;
不幸的是，在缩小时仍然会为我提供菜单闪烁。
@alex_b previousDimensions = newDimensions 的要点是在调整大小后存储窗口的当前尺寸，因此在下一次调整大小事件时，我们可以确定窗口相对于上次调整大小时。关于 flash，我在最后一次编辑中添加的第二个代码块实际上应该是完成你想要做的所有事情
@alex_b 我最近的编辑修复了一个问题，即如果手动显示菜单在再次单击按钮之前始终保持可见，即使窗口已调整大小

【解决方案2】：

Kelvin Mackay 提供的答案是可行的，但是对于一些非常简单的事情，它是否有点冗长？为什么放大或缩小都很重要，真正关心的问题是一个点，767px，这是唯一的决定性因素，需要做的就是改变可见性。

如果您使用的是响应式 UI 原则，这实际上更多地与处理跨多个设备的布局有关，而不是人们调整浏览器窗口的大小，为什么您甚至需要一个按钮来隐藏/显示菜单。它应该根据屏幕大小自动发生。

首先，当页面加载时，您需要确定菜单状态，然后您需要做的就是拥有一个调整大小处理程序（如果您只是将两者结合起来，为什么还要担心菜单是否已经隐藏):

   $(window).resize(function(){
            var w = $(window).width();
            if(w > 767) {
                $('#main-menu ul').show();
            }
            else {
                $('#main-menu ul').hide();
            }
        });

编辑：很久没有这个答案了，如果你现在要这样做，你应该在requestAnimationFrame里面做这种事情。

【讨论】：