javascript - 在表格中创建抽屉效果

我正在创建一个带有行的表。当我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。