Question

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

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

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

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

$('.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

您可以使用相同的事件切换课程

DEMO 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;}

单击javascript切换表格行背景颜色

4 个答案: