Question

我有这个代码，当按钮出现时显示/隐藏菜单

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

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

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

$('.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，这是唯一的决定因素，所有需要做的就是改变可见性。

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

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

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

编辑：从这个答案开始已经很长时间了，如果你现在这样做，你应该在requestAnimationFrame内做这类事情。

JQuery在窗口向上扩展或缩小时调整大小（）

2 个答案: