jquery - JQuery浏览器调整大小启动功能

Question

我有以下功能，它在准备好文档时按预期工作，但在调整大小时它不会注册大小更改并在调整大小之前执行大小警报。我已经添加了menuInitialized作为标志来尝试解决这个问题，但现在它初始化了多次。例如，如果我多次调整浏览器的大小，它将警告“小”、“大”、“小”。

var menuInitialized = false;

function doMenu() {
    var left = $('.c_left').height();
    var right = $('.c_right').height();
    if (left > right) {
        $('.c_right').css('height', left + 'px');
    }
    $(".c_left, .top_right, .c_right, .c_myaccount, .header_image, .c_footer, .copyright, .accepts, .myaccount, .header_logo").removeAttr('style');
    var $menu = $(".c_left");
    var width = $(window).width();
    var status = 'closed';
    var width = $(window).width();
    if (width < 550) {
        if (!menuInitialized) {
            $('.icon-menu-2').on('click', function(event) {
                alert('small');
                if (status === 'closed') {
                    $menu.animate({
                        width: 185,
                        marginLeft: 0,
                        display: 'toggle'
                    }, 'fast');
                    $(".top_right, .c_right, .c_myaccount, .c_footer, .copyright, .accepts").animate({
                        marginLeft: 185,
                        display: 'toggle'
                    }, 'fast');
                    $(".myaccount").animate({
                        marginRight: -185,
                        display: 'toggle'
                    }, 'fast');
                    return status = 'open';
                } else if (status === 'open') {
                    $menu.animate({
                        width: 0,
                        marginLeft: -185,
                        display: 'toggle'
                    }, 'fast');
                    $(".top_right, .c_right, .c_myaccount,.c_footer, .copyright, .accepts").animate({
                        marginLeft: 0,
                        display: 'toggle'
                    }, 'fast');
                    $(".myaccount").animate({
                        marginRight: 0,
                        display: 'toggle'
                    }, 'fast');
                    return status = 'closed';
                }
            });
            menuInitialized = true;
        }

    } else if ((width < 800) && (width > 550)) {
        if (menuInitialized) {
             $('.icon-menu-2').on('click', function(event) {
                alert('large');
                if (status === 'closed') {
                    $menu.animate({
                        width: 185,
                        marginLeft: 0,
                        display: 'toggle'
                    }, 'fast');
                    $(".top_right, .c_right, .c_myaccount, .header_image, .c_footer, .copyright, .accepts").animate({
                        marginLeft: 185,
                        display: 'toggle'
                    }, 'fast');
                    $(".myaccount, .header_logo").animate({
                        marginRight: -185,
                        display: 'toggle'
                    }, 'fast');
                    return status = 'open';
                } else if (status === 'open') {
                    $menu.animate({
                        width: 0,
                        marginLeft: -185,
                        display: 'toggle'
                    }, 'fast');
                    $(".top_right, .c_right, .c_myaccount, .header_image,.c_footer, .copyright, .accepts").animate({
                        marginLeft: 0,
                        display: 'toggle'
                    }, 'fast');
                    $(".myaccount, .header_logo").animate({
                        marginRight: 0,
                        display: 'toggle'
                    }, 'fast');
                    return status = 'closed';
                }
            });
            menuInitialized = false;
        }
    }
}
$(document).ready(doMenu);
$(window).resize(doMenu);

Answer 1

将所有 js/jquery 放入准备好的文档中：

$(document).ready(

    // Init
    var menuInitialized = false;
    doMenu();

    // Resize event
    $(window).resize(doMenu);

    // doMenu function
    function doMenu() {

        if (!menuInitialized) {
            menuInitialized = true;

            if (width < 550) {
                alert('small')
            } else if ((width < 800) && (width > 550)) {
               alert('large')
            }
        }
    }

);

Answer 2

我希望您不会更新width.

所以在函数内部你应该得到对象的新宽度

function doMenu() {
    width = some_value // Get the width of the desired object

    // Your code here...
}

Answer 3

我需要取消绑定点击功能，即：$('.icon-menu').unbind('click');