jQuery resize()在窗口上缩放或缩小

Question

我有此代码，该代码在按钮时显示/隐藏菜单

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

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

我想知道一种方法可以检测resize（）在这种情况下在缩放时缩放r缩放r，我可以hide（）菜单，当扩展时，我可以显示（）菜单。

$('.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();
                }
            });

Answer 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
    }
);

（请注意，使用此技术，确定窗口是否变大的代码块完全不必要）

Answer 2

答案开尔文·麦凯（Kelvin Mackay）提供了有效的作品，但是对简单的东西有点冗长吗？为什么无论您是在扩大还是扫描，所有问题真正关心的是一个点，是767px，这是唯一的确定因素，所有需要完成的因素都是Alter可见性。

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

首先，当页面加载时，您需要确定菜单状态，那么您需要做的就是拥有一个大小的处理程序（如果您简单地将两者结合在一起，以及为什么担心菜单是否已经隐藏了）：

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

编辑：自从这个答案以来已经很长一段时间了，如果您现在要这样做，应该在requestAnimationFrame中做这种类型的事情。