切换链接点击类

【问题标题】：Toggle class on link click切换链接点击类
【发布时间】：2011-04-10 08:24:51
【问题描述】：

我正在尝试在单击链接时为链接切换一个类，以便它显示加号以展开或减号以缩小但我无法使其正常工作。

我的jQuery如下：

$(".viewdetails").click(function() {
    $(this).toggleClass('viewdetailsoff');
    $(this).parents("tr").next().toggle();
    return false;
 })

我的初始链接

<a class="viewdetails" title="View History" href="">History</a>

【问题讨论】：

【解决方案1】：

如果只是图片不工作，请确保 .viewdetailsoff 在 CSS 中在 .viewdetails 之后定义，如下所示：

.viewdetails {
   background-image: url(minus.jpg);
}

.viewdetailsoff {
   background-image: url(plus.jpg);
}

无论元素本身的类顺序如何，例如它将是class="viewdetails viewdetailsoff"，CSS 中的顺序决定了哪一个获胜。或者，您可以切换两个类，使用.toggleClass() 有效地交换它们，如下所示：

$(this).toggleClass('viewdetails viewdetailsoff');

【讨论】：