菜单树

JavaScript实现菜单展开与收缩功能

最新推荐文章于 2024-04-21 10:03:39 发布

转载最新推荐文章于 2024-04-21 10:03:39 发布 · 1.1k 阅读

文章标签：

#menu #border #table #tree #javascript #function

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

博客展示了使用JavaScript实现菜单展开与收缩的代码。定义了Menu_Option函数，通过判断菜单的显示状态来切换显示与隐藏，并改变图标。页面中使用表格布局创建了多个主菜单和子菜单，点击主菜单图标可触发相应操作。

<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td colspan="2"><img name="Tree_01" src="Img/Tplus.gif" width="19" height="20" align="absmiddle" onClick="Menu_Option(this,Menu_01)">MainMenu</td>
</tr>
<tr id="Menu_01">
    <td width="19" background="Img/I.gif"><img src="Img/I.gif" width="19" height="20"></td>
    <td width="181"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="Img/T.gif" width="19" height="20" align="absmiddle">Menu</td>
        </tr>
        <tr>
          <td><img src="Img/T.gif" width="19" height="20" align="absmiddle">Menu</td>
        </tr>
        <tr>
          <td><img src="Img/T.gif" width="19" height="20" align="absmiddle">Menu</td>
        </tr>
        <tr>
          <td><img src="Img/T.gif" width="19" height="20" align="absmiddle">Menu</td>
        </tr>
    </table></td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td colspan="2"><img name="Tree_02" src="Img/Tplus.gif" width="19" height="20" align="absmiddle" onClick="Menu_Option(this,Menu_02)">MainMenu</td>
</tr>
<tr id="Menu_02">
    <td width="19" background="Img/I.gif"><img src="Img/I.gif" width="19" height="20"></td>
    <td width="181"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="Img/T.gif" width="19" height="20" align="absmiddle">Menu</td>
        </tr>
        <tr>
          <td><img src="Img/T.gif" width="19" height="20" align="absmiddle">Menu</td>
        </tr>
        <tr>
          <td><img src="Img/T.gif" width="19" height="20" align="absmiddle">Menu</td>
        </tr>
        <tr>
          <td><img src="Img/T.gif" width="19" height="20" align="absmiddle">Menu</td>
        </tr>
    </table></td>
</tr>
</table>