1

我有这个代码，当一个按钮被点击时显示/隐藏一个菜单 

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

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

我想知道一种方法来检测 resize() 是否在这种情况下按比例放大 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();
                }
            });
4

2 回答 2

4

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

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

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

于 2012-11-08T00:54:32.453 回答
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。

于 2012-11-08T01:10:21.770 回答