在桌子上创建抽屉效果

Question

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

​

Answer 1

也许有更好的解决方案，这只是我脑海中的第一件事。

1. 将onmouseleave从行移到表中，并将其更改为隐藏所有抽屉。我添加了一个class="drawer"，这样我就可以同时选择它们了。
2. 保留onmouseover的位置，但在显示当前抽屉之前，更改函数以隐藏所有抽屉。

看看我的小提琴。