jquery - 更改元素的 CSS 属性

Question

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

jQuery：

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

效果很好！

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

默认 CSS：

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

点击它会变成：

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

非常感谢您对此的任何指示。

Answer 1

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

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

CSS：

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

Answer 2

定义一个css类如下

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

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

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

Answer 3

您可以通过使用 jQuerytoggleClass()函数向菜单添加或删除 CSS 类来实现：

描述：根据类的存在或 switch 参数的值，从匹配元素集中的每个元素中添加或删除一个或多个类。

用法：

$('#accordion ul').toggleClass('.cssclass');

Answer 4

答案：-D

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