我正在创建一个包含行的表。当我mouseover
的任何一行时,紧挨着第一行的下一行并带有display=None
的另一行将更改为display=""
,以使其出现。很好。
我想放置一个onmouseleave=function(id)
,当鼠标离开这两行时,它将再次隐藏第二行。例如,转到第三行,或转到页面的一侧。
效果类似于出现的下拉抽屉,因此用户可以查看更多信息并单击按钮。但是,当我将onmouseleave
调用放在第一行(触发第二行出现的调用)时,我无法将鼠标悬停在第二行上,否则由于鼠标离开了第一行而被触发了消失。如果将鼠标悬停在第二行,则除非将鼠标悬停在第一行,否则该行将无法消失。因此,如果我要退出第一行的一侧,它不会消失,因为鼠标永远不会越过它。
我尝试将两行都包装在<div>
中,但是那样根本无法调用onmouseleave=function(id)
函数。我猜<div>
无法包装两个<tr>
?
如何允许这两个表行充当一个onmouseleave=
?
这不允许我单击第二行-> https://jsfiddle.net/tvxpzud8/
这根本不起作用-> https://jsfiddle.net/01w9js8x/
function openDrawer(drawer_id) {
var drawer = document.getElementById("drawer-" + drawer_id);
drawer.style.display = "";
}
function closeDrawer(drawer_id) {
drawer = document.getElementById("drawer-" + drawer_id);
drawer.style.display = "none";
}
<table>
<tr onmouseover="openDrawer(1)" onmouseleave="closeDrawer(1)">
<td>col 1-1</td>
<td>col 1-2</td>
<td>col 1-3</td>
</tr>
<tr id="drawer-1" style="display:none;">
<td>col 2-1</td>
<td>col 2-2</td>
<td>col 2-3</td>
</tr>
<tr onmouseover="openDrawer(2)" onmouseleave="closeDrawer(2)">
<td>col 3-1</td>
<td>col 3-2</td>
<td>col 3-3</td>
</tr>
<tr id="drawer-2" style="display:none;">
<td>col 4-1</td>
<td>col 4-2</td>
<td>col 4-3</td>
</tr>
</table>
可能会有更好的解决方案,这只是我想到的第一件事。
onmouseleave
移动到表格中,然后将其更改为隐藏所有抽屉。我添加了一个class="drawer"
,因此可以一次选择所有这些。onmouseover
保留在原位置,但是在显示当前抽屉之前,将功能更改为隐藏所有抽屉。请参阅我的fiddle。