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

JQuery浏览器调整启动功能

3 个答案: