JS实现树形菜单

最新推荐文章于 2024-12-19 19:40:50 发布

原创最新推荐文章于 2024-12-19 19:40:50 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#border #table #url #class #function #div

每日小技巧专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的卷帘菜单实现方案，通过HTML和JavaScript代码展示了如何创建一个可以展开和收起的菜单项。当点击菜单标题时，对应的子菜单会显示或隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码具体如下：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>卷帘菜单</title> </head> <mce:script type="text/javascript"></mce:script> <body> <TABLE width="180" border="0" cellSpacing=1 bgcolor="#000000" id="mainTable"> <TBODY id="myindex1" > <TR> <TD bgColor="#EEEEEE" style="background-image:url(left1.jpg)" mce_style="background-image:url(left1.jpg)" > <TABLE cellSpacing=0 cellPadding=0 width="180" border=0> <TR> <TD align="center" height="36"> <div onclick=onoff1() style="cursor:pointer;" mce_style="cursor:pointer;">采购信息</div> </TD> </TR> </TABLE> </TD> </TR> </TBODY> <TBODY id="myindex2" style="display:none" mce_style="display:none"> <TR> <TD class=normalText align="left" height=20> <table width="100%" bgcolor="#FFFFFF"> <tr align="center"> <td><a href="first.html" mce_href="first.html" target="mainFrame">发布采购信息</a></td> </tr> <tr align="center"> <td><a href="second.html" mce_href="second.html" target="mainFrame">修改采购信息</a></td> </tr> </table> </TD> </TR> </TBODY> <TBODY id="myindex3" style="background-image:url(BK023.jpg)" mce_style="background-image:url(BK023.jpg)"> <TR> <TD bgColor="#EEEEEE" style="background-image:url(left1.jpg)" mce_style="background-image:url(left1.jpg)"> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TR> <TD align="center" height="36"> <div onclick=onoff2() style="cursor:pointer;" mce_style="cursor:pointer;">供应信息</div> </TD> </TR> </TABLE> </TD> </TR> </TBODY> <TBODY id="myindex4" style="display:none" mce_style="display:none"> <TR> <TD class=normalText align="left" height=20> <table width="100%" bgcolor="#FFFFFF"> <tr align="center"> <td>发布供应信息</td> </tr> <tr align="center"> <td>修改供应信息</td> </tr> </table> </TD> </TR> </TBODY> </TABLE> </body> </html>