更改元素的CSS属性

Question

我有以下jQuery，它在单击按钮时切换手风琴菜单：

jQuery:

$(function() {  
 $('#chooseOption').click(function(){
  $('#accordion ul').toggle();
 });    
});

效果很好！

现在，我想知道是否也可以在切换时更改CSS height和background元素。因此，当我单击chooseOption时，它将更改该元素的height和background。

默认CSS:

#chooseOption {height:35px;background-image:url('1.jpg');}

点击将更改为：

#chooseOption {height:55px;background-image:url('2.jpg');}

非常感谢你对此的指点。

Answer 1

答:-D

$(function() {  
   $('#chooseOption').click(function(){
     $('#accordion ul').toggle();
     $('#chooseOption').toggleClass("chooseOptionNew");
   });    
});

Answer 2

为它创建一个类并切换类：

$(function() {  
 $('#chooseOption').click(function(){
  $('#accordion ul').toggleClass("itsclass");
 });    
});

CSS：

.itsclass {
  height:55px;
  background-image:url('2.jpg');
}

Answer 3

定义css类如下所示

.chooseOptionNew {height:55px;background-image:url('2.jpg');}

使用toggleClass()，此方法将添加/删除特定的类，

$(function() {  
 $('#chooseOption').click(function(){
  $('#accordion ul').toggle().toggleClass("chooseOptionNew");
 });    
});