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

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

$(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

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

描述：在。中的每个元素中添加或删除一个或多个类一组匹配的元素，取决于类的存在或者 switch参数的值。

用法：

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

Answer 4

答案:-D

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

更改元素的CSS属性

4 个答案: