后台常用的收缩菜单效果

Question

function StringBuffer() {   
    this.strings = new Array;   
}   
  
StringBuffer.prototype.append = function (str) {   
    this.strings.push(str);   
}   
  
StringBuffer.prototype.toString = function() {   
    return this.strings.join("");   
}function getMenu()
{
var oBuffer = new StringBuffer();
oBuffer.append("<dl id='leftMenu1'>");
oBuffer.append(" <dt id='leftMenu10'>菜单1</dt>");
oBuffer.append(" <dd id='leftMenu11'><a href='myzone-xgxx.html'>菜单1-1</a></dd>");
oBuffer.append(" <dd id='leftMenu12'><a href='myzone-ztzh.html'>菜单1-2</a></dd>");
oBuffer.append(" <dd id='leftMenu13'><a href='/dev/space/dev/forbidden.jsp'>菜单1-3</a></dd>");
oBuffer.append(" <dd id='leftMenu14'><a href='/dev/space/dev/activation.jsp'>菜单1-4</a></dd>");
oBuffer.append(" <dd id='leftMenu15'><a href='/dev/space/dev/updatePwd.jsp'>菜单1-5</a></dd>");
oBuffer.append(" <dd id='leftMenu16'><a href='/space.do?method=findBalancePage'>菜单1-6</a></dd>");
oBuffer.append("</dl>");
oBuffer.append("<dl id='leftMenu2'>");
oBuffer.append(" <dt id='leftMenu20'>菜单2</dt>");
oBuffer.append(" <dd id='leftMenu21'><a href='myzone-dgEAP.html'>菜单2-1</a></dd>");
oBuffer.append(" <dd id='leftMenu22'><a href='/ability.do?method=listDevEAP'>菜单2-2</a></dd>");
oBuffer.append("</dl>");
oBuffer.append("<dl id='leftMenu3'>");
oBuffer.append(" <dt id='leftMenu30'>菜单3</dt>");
oBuffer.append(" <dd id='leftMenu31'><a href='../../../app/usercenter/resource/newResource.html'>菜单3-1</a></dd>");
oBuffer.append(" <dd id='leftMenu32'><a href='../../../app/usercenter/resource/myResources.html'>菜单3-2</a></dd>");
oBuffer.append(" <dd id='leftMenu33'><a href='../../../app/usercenter/resource/myResources.html'>菜单3-3</a></dd>");
oBuffer.append("</dl>");
oBuffer.append("<dl id='leftMenu4'>");
oBuffer.append(" <dt id='leftMenu40'>菜单4</dt>");
oBuffer.append(" <dd id='leftMenu41'><a href='../../../app/usercenter/resource/newResource.html'>菜单4-1</a></dd>");
oBuffer.append(" <dd id='leftMenu42'><a href='../../../app/usercenter/resource/myResources.html'>菜单4-2</a></dd>");
oBuffer.append("</dl>");
return oBuffer.toString();
}
$(document).ready(function() {
var menuId = "#leftMenu";
$(menuId)[0].innerHTML=getMenu(); //所有二级菜单隐藏
$(menuId).find("dd").hide();
    $(menuId).find("dl:first").find("dd").show();
 $(menuId).find("dl:first").find("dt").addClass("selected"); $(menuId).find("dt").hover(function(){ $(this).addClass("hover")}, function(){$(this).removeClass("hover") })
.click(function(){

if($(this).parent().find("dd").get(0).style.display == "block"){
$(this).parent().find("dd").hide();
$(this).removeClass("selected");
} else {
$("dt").removeClass("selected")
$("dd").hide();
$(this).addClass("selected");
$(this).parent().find("dd").show(); 
}

})
$(menuId).find("a").focus(function(){$(this).get(0).blur()})
//二级菜单点击样式
$(menuId).find("dd").click(function(){ $("dd").removeClass("focus");$(this).addClass("focus") });})
function selectMenu(menuid,subtitleid,submenuid) 
{ 
var menuId = "#leftMenu";
$(menuId).find("dd").hide();
$(menuId).find("dt").removeClass("selected");
var menuObj = document.getElementById(menuid);
var ddObj = menuObj.getElementsByTagName("dd"); ddObj[0].style.display ="block";
for(i=0;i<ddObj.length;i++)
{
ddObj[i].style.display = "";
} document.getElementById(subtitleid).className="selected";
document.getElementById(submenuid).className ="focus";

}
以上是调用的js外部代码，在html页面里只需加入下面一行代码就行了
<script type="text/javascript"> 
$(document).ready(function() 
{
$("#space").addClass("on");

// 初始化菜单选择项 begin
selectMenu('leftMenu1','leftMenu10','leftMenu11');
// 初始化菜单选择项 end
});
</script>
其中selectMenu('leftMenu1','leftMenu10','leftMenu11');是随着你页面而改变的，你当前的页面是上面写的菜单3下面的菜单3-1，那这段代码就应用是
selectMenu('leftMenu3','leftMenu30','leftMenu31');