在 table 中创建抽屉效果

Question

我正在创建一个包含行的 table。当我 mouseover 任何一行时，第一行下面带有 display=None 的另一行将更改为 display="" 以允许它出现。那工作正常。

我想放置一个 onmouseleave=function(id)，它会在鼠标离开第二行时再次隐藏第二行。例如，转到第三行，或离开页面的一侧。

效果就像出现一个下拉抽屉，以便用户可以查看更多信息并单击按钮。但是，当我将 onmouseleave 调用放在第一行（触发第二行出现的调用）时，我不能将鼠标悬停在第二行上，否则它会被触发消失，因为鼠标离开了第一行排。如果我将鼠标悬停在第二行，那么除非先将鼠标悬停，否则该行将无法消失。所以，如果我要退出第一行的一侧，它不会消失，因为鼠标一开始就不会越过它。

我尝试将两行包装在 <div> 中，但那样根本无法调用 onmouseleave=function(id) 函数。我猜一个 <div> 不能包裹两个 <tr>?

如何让这两 table 行作为一个 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

可能会有更好的解决方案，这只是我想到的第一件事。

将 onmouseleave 从行移动到 table，并将其更改为隐藏所有抽屉。我添加了一个 class="drawer" 这样我就可以一次 select 所有这些。
将 onmouseover 保留在原处，但更改功能以隐藏所有抽屉，然后再显示当前抽屉。

查看我的fiddle。

在 table 中创建抽屉效果

Create drawer effect in a table

html

javascript

mouseover