javascript - javascript 在点击时切换表格行背景颜色

Question

所以我有一些javascript代码在表格行上单击exapnds所有后续表格行，直到它再次找到相同的表格行类。

如果您将鼠标悬停在一行上，它会变为灰色，这是我所期望的。

唯一不起作用的是当您单击表格行时，我希望表格行背景颜色与悬停（灰色）相同。当您单击返回并折叠该行时，颜色应该会消失。

我尝试添加一个切换类，如下所示。

$('.my-class').click(function(){

    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("tr.my-class.negative.clicked");
});

但我不确定这是否是正确的方法。这是我的 jsfiddle：http: //jsfiddle.net/DhdRG/3/

Answer 1

只是一个抬头。这也有效，这可能是一个更好的解决方案：

$('.my-class').click(function(){

    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("clicked");

});

http://jsfiddle.net/DhdRG/7/

Answer 2

您可以使用相同的事件切换班级

演示http://jsfiddle.net/kevinPHPkevin/DhdRG/4/

$('.composite-test').toggleClass("grey");

Answer 3

您可以尝试$(this).removeClass('tr.my-class').addClass('tr.my-class.negative.clicked');代替$(this).toggleClass('tr.my-class.negative.clicked')但替换$(this)为单击的 tr 的 id。

Answer 4

您可以切换另一个 CSS 类以使表格行背景颜色与悬停（灰色）相同。 http://jsfiddle.net/DhdRG/5/

$('.my-class').click(function(){

    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("tr.my-class.negative.clicked");
    $(this).toggleClass("rowBg"); // added this line
});

---

CSS

.rowBg { background:gray;}