推拉门

<mce:script language="javascript"><!-- function menuChange(id,shiftid){ shiftid=parseInt(shiftid); thismenu=eval("document.getElementById('submenu"+id+"')"); thisarrow=eval("document.getElementById('arrow"+id+"')"); id=(id==1?id+=1:id-=1) thatmenu=eval("document.getElementById('submenu"+id+"')"); thatarrow=eval("document.getElementById('arrow"+id+"')"); if(shiftid!=1){ thismenu.style.display=""; thisarrow.innerText="<<"; thisarrow.mark=1; thatmenu.style.display="none"; thatarrow.innerText=">>"; thatarrow.mark=2; }else{ thismenu.style.display="none"; thisarrow.innerText=">>"; thisarrow.mark=2; thatmenu.style.display=""; thatarrow.innerText="<<"; thatarrow.mark=1; } } // --></mce:script> <div id="menu"> <div class="navmenu"> <div class="menutitle">部门管理 </div> <div class="menuchange" id="arrow1" onclick="menuChange(1,this.mark);" mark="1"><< </div> </div> <div id="submenu1" style="display:;clear:both;" mce_style="display:;clear:both;"> <div class="menucontent"> <ul> <li> <a href="in/adddep.aspx" mce_href="in/adddep.aspx" target="mainFrame">增加部门 </a> </li> <li> <a href="in/editdep.aspx" mce_href="in/editdep.aspx" target="mainFrame">编辑部门 </a> </li> <li> <a href="in/querydep.aspx" mce_href="in/querydep.aspx" target="mainFrame">查询部门 </a> </li> </ul> </div> </div> <div class="navmenu"> <div class="menutitle">员工管理 </div> <div class="menuchange" id="arrow2" onclick="menuChange(2,this.mark);" mark="2">>> </div> </div> <div id="submenu2" style="display:none;clear:both;" mce_style="display:none;clear:both;"> <div class="menucontent"> <ul> <li> <a href="in/Default.aspx" mce_href="in/Default.aspx" target="mainFrame">增加员工 </a> </li> <li> <a href="in/Default.aspx" mce_href="in/Default.aspx" target="mainFrame">修改员工 </a> </li> <li> <a href="in/Default.aspx" mce_href="in/Default.aspx" target="mainFrame">删除员工 </a> </li> <li> <a href="in/Default.aspx" mce_href="in/Default.aspx" target="mainFrame">查询员工 </a> </li> </ul> </div> </div>

此代码只是给出个简单例子，如果菜单项很多，那么可以把函数拆分成两个函数，然后使用循环来调用不同的函数