Question

我需要折叠表，除非单击一行。下面的代码完成了这项工作：

HTML：

<table border="0">
<tr><td>This is row number</td><td>1</td></tr>
<tr><td>This is row number</td><td>2</td></tr>
<tr><td>This is row number</td><td>3</td></tr>
<tr><td>This is row number</td><td>4</td></tr>
<tr><td>This is row number</td><td>5</td></tr>
</table>

jQuery的：

$("tr").click(function () {
    $("tr").not(this).slideToggle();
});

一旦可见，只有一行想要在mouseover上展开表格，这也很容易：

$("tr").mouseover(function(){
        $("tr").show();
});

现在，如何让表格在mouseout上折叠回来，让同一行可见？

http://jsfiddle.net/GbRAZ/201/

欢迎任何建议。

Answer 1

您应该将一个类添加到活动行，并使用它来确定要显示/隐藏的内容

$("tr").click(function () {
    $(this)
       .addClass('active')
       .siblings()
       .removeClass('active')
       .slideToggle();
});

$(".header").mouseover(function(){
    $("tr").show();
}).mouseout(function(){
    $('tr:not(.active)').hide();
});

Answer 2

感谢@ gaby-aka-g-petrioli代码工作完美，只需将tr更改为table $("table").mouseover(function()，即可更改所选行。

谢谢。

扩展/折叠表除一行外

2 个答案: