2

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

jQuery:

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

效果很好!

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

默认 CSS:

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

点击它会变成:

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

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

4

4 回答 4

6

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

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

CSS:

.itsclass {
  height:55px;
  background-image:url('2.jpg');
}
于 2012-12-21T12:17:18.573 回答
1

定义一个css类如下

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

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

$(function() {  
 $('#chooseOption').click(function(){
  $('#accordion ul').toggle().toggleClass("chooseOptionNew");
 });    
});
于 2012-12-21T12:20:19.050 回答
1

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

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

用法:

$('#accordion ul').toggleClass('.cssclass');
于 2012-12-21T12:20:20.563 回答
1

答案:-D

$(function() {  
   $('#chooseOption').click(function(){
     $('#accordion ul').toggle();
     $('#chooseOption').toggleClass("chooseOptionNew");
   });    
});
于 2012-12-21T14:14:12.240 回答