0

几周以来，我一直在尝试解决以下代码，但无法弄清楚出了什么问题。当图标被选中时，下面的菜单会从左侧滑入和滑出，它还会像 Facebook 应用程序一样将元素移到右侧。但是，我需要它根据浏览器的大小略有不同（页面上的不同元素需要移动）。它在准备好文档时工作正常，但是当我调整浏览器大小时，它会尝试多次滑入和滑出，并且没有根据大小执行正确的滑动功能。任何人都可以建议吗？

var menuInitialized = false;

function doMenu() {

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

if (width < 550) {
    if (!menuInitialized) {
        $('.icon-menu-2').on('click', function(event) {
            alert('small'); //test which is being activated onclick
            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'); //test which is being activated onclick
            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);
4

3 回答 3

1

可能是这样的：

var timeoutResize;
$(window).resize(function(){ 
        clearTimeout(timeoutResize);
        timeoutResize = setTimeout(doMenu,50);

    });
于 2013-04-12T15:00:15.003 回答
0

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

于 2013-04-15T11:13:37.273 回答
0

Roasted 的解决方案应该有效。在大多数浏览器中，随着窗口大小的调整，resize 事件会连续触发。根据您在处理程序中执行的操作，您可能需要引入延迟以等待调整大小完成，然后再执行处理程序代码。

于 2013-04-12T15:18:33.767 回答