我有这个表,用于菜单和子菜单项。 它是PHP的组合(用于读取菜单项和每个菜单项的所有子菜单项)和HTML。
我需要的是找到一种方法来仅在主菜单项的子菜单项上切换可见性。
我用javascript和jQuery(getelementbyID,byName,byClassname)尝试过很多东西,但这一切似乎都不起作用..(也许它很简单,我让它变得困难..)
我所做的是在DB表中获取每行的mainmenu项目,按订单号排序。 在发布包含内容的表格行时,我在子菜单数据库表中查询子菜单项。
我将子菜单项作为额外的普通TR行发布,因此它不是单独的表或任何东西,只是一个新的TR。
对于两个while循环,我运行一个计数器,以便我可以将其用作参考编号。
我在这些子菜单项上将显示设置为'none',但我不确定从那里开始。
例如:
<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 //-->
答案 0 :(得分:0)
如果我知道你问的是什么,那么只用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>