Question

我正在使用jQuery来显示和隐藏面板。上面有一个小箭头图像，它也会在隐藏和显示时发生变化。我的代码是

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

现在，当面板打开时，将一个类添加到to_up，并在面板关闭时添加to_down。我有各自的向上和向下箭头图像。

有人可以帮助我在'toppanelarrow'的点击事件中添加jQuery，以便将新类添加到范围中。

我尝试了$().addClass().removeClass()，但这没效果。

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

由于

Answer 1

如果要在元素上开一个类：

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

就是你所需要的一切。

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

Answer 2

另外，你可以尝试

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

Answer 3

您应该尝试（如果span具有类to_up

，则会将类添加到to_down

$('#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').;
});

Answer 4

尝试：

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

Answer 5

获得想要的效果：

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();
    });    
});

jQuery：在click事件上更改类

5 个答案: