Question

我有以下点击事件。我还要切换背景位置：点击顶部和底部之间。

$('.close').click(function () {
    $('.banner-inner-content').slideToggle('slow', function () {
    });
});

那我怎么能在两者之间切换？

.close{background-position:top}

和

.close{background-position:bottom;}

Answer 1

您可以将功能传递给.css()：

$(this).css('background-position', function(i, val) {
    return val === 'top' ? 'bottom' : 'top';
});

或者您定义了一个新类：

.close.bottom {
    background-position: bottom;
}

并使用.toggleClass()：

$(this).toggleClass('bottom');

Answer 2

你可以使用两个不同的css类（一个用于顶部，另一个用于底部），当onClick事件被拍摄时改变它。

Answer 3

    $('.close').click(function () {
        if($('.banner-inner-content').hasClass('top')){
            $('.banner-inner-content').removeClass('top');
            $('.banner-inner-content').addClass('bottom');
    }else{
            $('.banner-inner-content').addClass('top');
            $('.banner-inner-content').removeClass('bottom');
    }
});

Answer 4

尝试使用isvisible检查是否显示它并添加相应的位置：

$('.close').click(function () {
    $('.banner-inner-content').slideToggle('slow', function () {
        if( $(this).is(':visible') ) {
            $(this).css({backgroundPosition: 'top'});
        }
        else {
            $(this).css({backgroundPosition: 'bottom'});
        }
    });
});

单击jquery更改css样式

4 个答案: