当前位置导航:炫浪网>>网络学院>>网页制作>>JavaScript教程

用JAVASCRIPT实现折叠菜单效果

以下是javaSCRipT内容:

<script language="Javascript" type="text/JavaScript">
function menu_tree(meval)
{
var left_n=eval(meval);
if (left_n.style.display=='none')
{ eval(meval+".style.display='';"); }
else
{ eval(meval+".style.display='none';"); }
}
</script>

调用SCRIPT的方法:

<!--    菜单 1 开始状态为打开   -->

<TABLE class=Menu cellSpacing=0 align=center>
<TBODY>
<TR>
    <TH onClick="javascript:menu_tree('left_1');" align=middle>≡ 登录信息 ≡</TH>
</TR>

<TR id=left_1>
    <TD>
      <TABLE width="100%">
        <TBODY>
        <TR>
          <TD>当前登录用户</TD>
   </TR>
        <TR>
          <TD>退出登录</TD>
        </TR>
        <TR>
          <TD>修改密码
    </TD>
   </TR>
   </TBODY>
   </TABLE>
     </TD>
</TR>
</TBODY>
</TABLE>

<!--    菜单 2 开始状态关闭(不展开) (<tr id=left=2 style="DISPLAY:none") -->

<TABLE class=Menu cellSpacing=0 align=center>
<TBODY>
<TR>
    <TH onClick="javascript:menu_tree('left_2');" align=middle>≡ 其它信息 ≡</TH>
</TR>

<TR id=left_2 style="DISPLAY: none">
    <TD>
      <TABLE width="100%">
        <TBODY>
        <TR>
          <TD>其它信息</TD>
   </TR>
        <TR>
          <TD>其它信息</TD>
        </TR>
        <TR>
          <TD>其它信息
    </TD>
   </TR>
   </TBODY>
   </TABLE>
     </TD>
</TR>
</TBODY>
</TABLE>

这样就可以实现折叠菜单的效果了。

相关内容
赞助商链接