JSFiddle:http://jsfiddle.net/9u8tnh97/
我使用的是jQuery和Bootstrap。我有一个包含4个<tr>
元素的表,如下所示:
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="hover-data">
<td>Mark</td>
<td>Otto</td>
</tr>
<tr class="hover-link hide">
<td colspan="2"><a href="#">Some link1</a></td>
</tr>
<tr class="hover-data">
<td>Larry</td>
<td>the Bird</td>
</tr>
<tr class="hover-link hide">
<td colspan="2"><a href="#">Some link2</a></td>
</tr>
</tbody>
</table>
这是我的Javascript:
$('table tbody tr').hover(function() {
if($(this).hasClass('hover-data')){
$(this).next().show();
$(this).hide();
} else {
$(this).prev().show();
$(this).hide();
}
});
首先,我通过给它们一个hide
类来隐藏table-hover
类的两行,而只显示table-data
类的那两行。
我想要实现的是:当我将类table-data
悬停在tr
上时,我希望显示类table-hover
的下一个和立即的tr
,并隐藏"悬停的tr"。
当我再次将鼠标移到外面时,我希望恢复所有内容,并且只看到tr
和类hover-data
不确定为什么我的代码不能工作。有什么想法吗?
这一个对原始行使用mouseenter
,对新行使用mouseleave
。
$('table tbody').on('mouseenter', 'tr.hover-data', function () {
$(this).next().show();
$(this).hide();
}).on('mouseleave', 'tr.hover-link', function () {
$(this).prev().show();).hide();
});
JSFiddle:http://jsfiddle.net/TrueBlueAussie/9u8tnh97/15/
我注意到引导程序hide
类有点太"强",并且覆盖了show()
,所以我现在也将其更改为style="display: none"
。请使用您自己的类,例如以下示例中的hideme
:http://jsfiddle.net/TrueBlueAussie/9u8tnh97/17/
我使用委托事件(出于习惯,因此它们可以共享一个公共选择器),但两个独立的"正常"(静态)选择器可能也会正常工作。例如。http://jsfiddle.net/TrueBlueAussie/9u8tnh97/16/
像这样:
$('table tbody tr').hover(function() {
if($(this).hasClass('hover-data')){
$(this).next().toggleClass('hidden');
}
});
https://jsfiddle.net/gqyrpnes/