Question

我一直试图解决下面的代码已经好几个星期但是却无法弄清楚出了什么问题。当选择图标时，下面从左侧滑入和滑出菜单，它还像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);

Answer 1

这样的事情可能是：

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

    });

Answer 2

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

Answer 3

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

根据浏览器大小，JQuery动画onClick

3 个答案: