使用jquery更改向上和向下箭头

Question

为什么这个jQuery不会像我想要的那样将我的图像更改为向下箭头？当用户打开下拉菜单时,向上箭头会变为向下箭头.我正在用if if做这个,因为我不知道任何更简单的方法,但它不起作用.无论我点击多少次,箭头都会保持整个时间.这是jQuery.应该是所有需要的.谢谢!

    $("h3#mpcClients").click(function() {
            $("#hidden0").slideToggle(500); 

            var up = true;

            if (up == true) {

            $("td h3").css("background-image", "url(http://www.crm-newsletter.com/client-emails/images/arrowDown.png)");
            up=false;
          }
            else if(up == false) {
                $("td h3").css("background-image", "url(http://www.crm-newsletter.com/client-emails/images/arrowUp.png)");
            up=true;
            }
            });

Answer 1

请参阅.toggleClass()并设置一些css,如下所示:

.up {
    background-image: url("http://www.crm-newsletter.com/client-emails/images/arrowDown.png")
}
.down {
    background-image: url("http://www.crm-newsletter.com/client-emails/images/arrowDown.png")
}

确保将html设置为默认箭头方向,如下所示:

<td>
    <h3 class="up">Some text</h3>
</td>

现在为js更改元素的css类:

$("h3#mpcClients").click(function() {
        $("#hidden0").slideToggle(500);

        // This adds a class if the element doesn't already have it
        // if the element already has the class it will remove it.
        $("td h3").toggleClass("up down"); 
});