2012-03-14 69 views
0

我正在使用jQuery的面板来显示和隐藏。它上面有一个小箭头图像,它也在隐藏和显示上发生变化。我的代码是jQuery:更改类的单击事件

<div class="trigger-m"><span id="toppanelarrow">&nbsp;</span></div> 

现在当面板打开时,类会添加到to_up,面板关闭时会添加to_down。我有相应的上下箭头图像。

有人可以帮助我添加一个jQuery on'toppanelarrow'的点击事件,所以一个新的类被添加到跨度。

我试过$().addClass().removeClass()但这没有奏效。

更新:请找到小提琴实施http://jsfiddle.net/B5QUj/4/

感谢

+0

显示代码和HTML(在HTTP://的jsfiddle .net如果可能的话) – 2012-03-14 14:07:16

+0

不好意思回复迟到。我已经用jsfiddle编码了,这里是链接。 http://jsfiddle.net/B5QUj/3/ – Aditya 2012-03-14 18:28:26

回答

1

你应该试试(这增加了类to_down如果跨度有to_up

$('#toppanelarrow').click(function(){ 
    if($(this).hasClass('to_up')){ 
    $(this).addClass('to_down').removeClass('to_up'); 
    }else{ 
    $(this).addClass('to_up').removeClass('to_down'); 
    } 
}); 

这也可以写成

$('#toppanelarrow').click(function(){ 
     $(this).toggleClass('to_up to_down').; 
}); 
+0

尼古拉,我也试过这个,但它不工作。 – Aditya 2012-03-14 14:11:14

+1

@Aditya你确定,它似乎在这里工作http://jsfiddle.net/q8dGy/1/ – 2012-03-14 14:18:48

2

此外,您可以尝试

$(this).toggleClass('classname'); 
0

尝试:

$("#yourClassID").addClass("cssClass"); 
3

如果你有元件上的一个类来开始:

$('#foo').on('click', function() { 
    $(this).toggleClass('to_up to_down'); 
});​ 

是你所需要的。

演示:http://jsfiddle.net/kXNk8/

0

为了得到想要的效果:

HTML:

<input id="btn" type="button" value="click it" /> 

<div class="box"> 
    <span>Tekst</span> 
</div> 

JS:

$(document).ready(function(){ 

    $("#btn").click(function(){ 
     $(".box").toggle(); 
    });  
});