0

我有以下代码，它从左到右滑动一列，并将列右侧的所有内容推到右侧，然后再次返回（有点像 facebook 应用程序）。它在准备好文档时工作正常，但在调整大小时不能正常工作。调整大小后，它开始出现奇怪的行为。就好像它在执行以前的功能而不是在调整大小时注册新功能。

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', function(event) ，如下所示，但在调整大小时功能无法正常工作的问题仍然存在。

4

1 回答 1

1

您可以使用标志来代替切换。

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

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

    }
});
于 2013-04-04T13:38:21.817 回答