单击jquery更改css样式

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

$('.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'}); } }); });