jquery手風琴源碼

① 高分求jquery 手風琴效果實現代碼

<style>
*,body,ul,li,a,h2{ margin:0; padding:0; list-style:none;}
body{font:12px "宋體"; padding-top:20px;}
#menu { width:211px; height:100%; float:left; margin-left:22px; margin-left:11px; margin-top:10px; margin-bottom:10px; _padding-bottom:10px; overflow:hidden;}
#menu a { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/itemBg.jpg) no-repeat left top; color: #000000; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}
#menu a:hover { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/typeBg.jpg) no-repeat left top; color: #ffffff; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

#menu h2 { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/type_sec.jpg) no-repeat left top; color: #db5901; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}
#menu h2:hover { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; color: #333333; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

#menu a.navhov { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/typeBg.jpg) no-repeat left top; color: #ffffff; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

.no { display:none;}
.type_prod_title{width:234px; height:26px; background-color:#4c4c4c; text-align:center; font-size:12px; color:White; line-height:26px; font-weight:normal; float:left; overflow:hidden;}
</style>
<div class="type_prod_con">
<div class="type_prod_title">
產品專區</div>
<div id="menu">
<a onclick="javascript:ShowMenu(this,'NO0')">實木地板系列</a>
<span id="NO0" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO00')">
實木地板名稱</h2>
<h2 onclick="javascript:ShowMenu(this,'NO01')">
實木地板名稱</h2>
<h2 onclick="javascript:ShowMenu(this,'NO02')">
實木地板名稱</h2>
<h2 onclick="javascript:ShowMenu(this,'NO03')">
實木地板名稱</h2>
</span>
<a onclick="javascript:ShowMenu(this,'NO1')">實木門系列</a> <span id="NO1" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO10')">
實木門名稱</h2>
<h2 onclick="javascript:ShowMenu(this,'NO11')">
實木門名稱</h2>
</span><a onclick="javascript:ShowMenu(this,'NO2')">板式傢具系列</a> <span id="NO2" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO20')">
三級菜單C_1</h2>
<h2 onclick="javascript:ShowMenu(this,'NO21')">
三級菜單C_2</h2>
</span><a onclick="javascript:ShowMenu(this,'NO3')">軟床系列</a> <span id="NO3" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO30')">
四級菜單D_1</h2>
<h2 onclick="javascript:ShowMenu(this,'NO31')">
四級菜單D_2</h2>
</span><a onclick="javascript:ShowMenu(this,'NO4')">沙發系列</a> <span id="Span1" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO40')">
四級菜單D_1</h2>
<h2 onclick="javascript:ShowMenu(this,'NO41')">
四級菜單D_2</h2>
</span><a onclick="javascript:ShowMenu(this,'NO5')">飾品系列</a> <span id="Span2" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO50')">
四級菜單D_1</h2>
<h2 onclick="javascript:ShowMenu(this,'NO351')">
四級菜單D_2</h2>
</span>
</div>
</div>

<script language="JavaScript">
<!--//
function ShowMenu(obj,noid){
var block = document.getElementById(noid);
var n = noid.substr(noid.length-1);
if(noid.length==4){
var ul = document.getElementById(noid.substring(0,3)).getElementsByTagName("ul");
var h2 = document.getElementById(noid.substring(0,3)).getElementsByTagName("h2");
for(var i=0; i<h2.length;i++){
//h2[i].innerHTML = h2[i].innerHTML.replace("+","-");
h2[i].style.color = "";
}
obj.style.color = "#db5901";
for(var i=0; i<ul.length; i++){if(i!=n){ul[i].className = "no";}}
}else{
var span = document.getElementById("menu").getElementsByTagName("span");
var h1 = document.getElementById("menu").getElementsByTagName("h1");
for(var i=0; i<h1.length;i++){
h2[i].innerHTML = h1[i].innerHTML.replace("+","-");
h2[i].style.color = "";
}

obj.style.color = "#ffffff";
for(var i=0; i<span.length; i++){if(i!=n){span[i].className = "no";}}
}
if(block.className == "no"){
block.className = "";
obj.innerHTML = obj.innerHTML.replace("-","+");
}else{
block.className = "no";
obj.style.color = "";

}
}
//-->
</script>