Question

我有以下代码从左到右滑动一列，并将列右侧的所有内容向右推，然后再向后（有点像facebook应用程序）。它适用于文档就绪，但不适用于调整大小。调整大小后，它开始变得奇怪。它好像它在执行上一个函数而没有在resize上注册新函数。

function doMenu() {

var $trigger = $(".icon-menu-2");
var $menu = $(".c_left");
var width = $(window).width();

if ((width < 870) && (width > 750)) {
    var status = 'closed';

    $('.icon-list').on('click', function(event){
        if ( status === 'closed' ){
            $menu.animate({
                width: 0,
                marginLeft: -200,
                display: 'toggle'
            }, 'fast');
            $(".content_right, .navbar").animate({
                marginRight: 0,
                display: 'toggle'
            }, 'fast');
            return status = 'open';

        } else if ( status === 'open' ) {
          $menu.animate({
                width: 200,
                marginLeft: 0,
                display: 'toggle'
            }, 'fast');
            $(".content_right, .navbar").animate({
                marginRight: -120,
                display: 'toggle'
            }, 'fast');
            return status = 'closed';
        }
    });
}

if (width < 750) {

   var status = 'closed';
    $('.icon-list').on('click', function(event){
        if ( status === 'closed' ){
            $menu.animate({
                width: 0,
                marginLeft: -200,
                display: 'toggle'
            }, 'fast');
            $(".content_right, .navbar").animate({
                marginLeft: 0,
                display: 'toggle'
            }, 'fast');
            return status = 'open';

        } else if ( status === 'open' ) {
            $menu.animate({
                width: 200,
                marginLeft: 0,
                display: 'toggle'
            }, 'fast');
            $(".content_right, .navbar").animate({
                marginLeft: 200,
                display: 'toggle'
            }, 'fast');
            return status = 'closed';
        }
    });            

}

}
$(document).ready(doMenu);
$(window).resize(doMenu);

编辑 - 将toggle（）更改为on（'click'，函数（事件），如下所示，但在调整大小时功能仍然无法正常运行。

Answer 1

您可以使用标记，而不是切换。

var status = 'closed';
$('.foo').on('click', function(event){
    if ( status === 'closed' ){
        //...
        return status = 'open';

    } else if ( status === 'open' ) {
        //..
        return status = 'closed';

    }
});

点击功能上的Jquery未在浏览器调整大小时重置

1 个答案: