javascript - 切换多个表行

Question

我得到了这张表，用于菜单和子菜单项。 它是 PHP(读取菜单项和每个菜单项的所有子菜单项)和 HTML 的组合。

我需要找到一种方法来仅切换主菜单项的子菜单项的可见性。

我已经用 javascript 和 jQuery(getelementbyID，byName，byClassname)尝试了很多东西，但似乎都不起作用..(也许它太简单了，我让它变得困难..)

我所做的是获取数据库表中每行的主菜单项，按订单号排序。 在发布包含内容的表行时，我在子菜单数据库表中查询子菜单项。

我将子菜单项作为额外的普通 TR 行发布，因此它不是单独的表格或任何东西，只是一个新的 TR。

对于两个 while 循环，我都运行了一个计数器，因此我可以将其用作引用编号。

我在这些子菜单项上将显示设置为“无”，但我不确定从那里去哪里。

例如:

<table>

<!-- column text //-->
<tr>
    <th>1st var</th><th>2nd var</th><th>3rd var</th>
</tr>

<!-- mainmenu item //-->
<tr>
    <td>1st var</td><td>2nd var</td><td>3rd var</td>
</tr>

<!-- submenu item //-->
<tr>
    <td>1st var</td><td>2nd var</td><td>3rd var</td>
</tr>

<!-- next mainmenu item //-->
<tr>
    <td>1st var</td><td>2nd var</td><td>3rd var</td>
</tr>


<!-- and so on //-->

Answer 1

如果我明白你在问什么，那么它可以单独用 CSS 解决。 您需要隐藏所有子菜单的子菜单类，并且需要将悬停时更改下一个同级表单元格显示属性(所以下一行)的菜单类。

因此，当您将鼠标悬停在第一行时，它将更改下一行的 TD 元素(最初它们的显示设置为无)。如果您不想让子菜单行在移动后消失，则需要为子菜单行以及表格单元格设置悬停样式。

table{
   width: 100%; 
    border: solid 1px #ccc;
}
th{background: #eee;}
.submenu>td{display: none; color: red;}
.menu:hover + .submenu>td{display: table-cell;}
.submenu:hover>td{display: table-cell;}

<table cellspacing="0" cellpadding="0">
    <tr>
        <th>1st var</th><th>2nd var</th><th>3rd var</th>
    </tr>
    <tr class="menu">
        <td>Menu A1</td><td>Menu A2</td><td>Menu A3</td>
    </tr>
    <tr class="submenu">
        <td>Submenu A1</td><td>Submenu A2</td><td>Submenu A3</td>
    </tr>
    <tr class="menu">
        <td>Menu B1</td><td>Menu B2</td><td>Menu B3</td>
    </tr>
    <tr class="submenu">
        <td>Submenu B1</td><td>Submenu B2</td><td>Submenu B3</td>
    </tr>
</table>