jQuery切换宽度

Question

使用下面的jQuery我正在尝试.toggleClass，但也要在两个给定宽度之间切换。我无法弄清楚如何在headerwidth和foabgwidth之间进行更改

$('.mChatOpts .pane').click(function(){
    var _headerwidth = $('#header').width();
    var _foabgwidth = $('.forabg').width();
    $('.chatbox').toggleClass('fixed',function(){           
        $('.fixed').css({
            'width':_headerwidth
        });
    });
});

Answer 1

您需要查询该元素以查看它是否具有fixed类并相应地执行..

$('.mChatOpts .pane').click(function(){
    var _headerwidth = $('#header').width();
    var _foabgwidth = $('.forabg').width();
    $('.chatbox').toggleClass('fixed',function(){
        var self = $(this),
            added = self.hasClass('fixed'),
            widthToUse = _headerwidth; // initialise with one value

        if (added){
            widthToUse = _foabgwidth;
        }

        self.width(widthToUse);
    });
});

如果你想要反过来，你应该反转if (added) ..

Answer 2

可能你可以试试这个：

$('.mChatOpts .pane').click(function(){
var _headerwidth = $('#header').width();
var _foabgwidth = $('.forabg').width();
$('.fixed').css('width',_foabgwidth);
$('.chatbox').toggleClass('fixed',function(){           
    $('.fixed').css('width',_headerwidth);
});
});