切换多个表行

Toggle multiple table rows

本文关键字：      更新时间：2023-09-26

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

我需要的是找到一种只在主菜单项的子菜单项上切换可见性的方法。

我用javascript和jQuery尝试了很多东西（getelementbyID、byName、byClassname），但似乎都不起作用。。（也许它太简单了，我让它变得很难。）

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

我把子菜单项作为额外的正常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 //-->

如果我明白你在问什么，那么只需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>

相关文章：
  • 没有找到相关文章