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

Question

为什么这个jQuery不能像我希望的那样把我的图像变成一个向下的箭头？当用户打开下拉菜单时，向上箭头变为向下箭头。我这样做是因为我不知道有什么更简单的方法，但是它不起作用。无论我点击多少次，箭头始终保持在上方。这是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"); 
});

Answer 2

每次调用该函数时，它都会将var设置为true。它每次都会出现在这个子句中

    var up = true;

    if (up == true) {

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

Answer 3

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

            $("td h3").toggleClass('up');
});

默认情况下，在css中添加显示向下箭头的规则，并在.up的规则中相应地设置背景箭头图像。

td h3 { background-image : url(http://www.crm-newsletter.com/client-emails/images/arrowDown.png);}

td h3.up { background-image : url(http://www.crm-newsletter.com/client-emails/images/arrowUp.png);}

整洁多了。