高分求jquery 手风琴效果实现代码

Question

现有如下的代码结构

想要利用纯JQuery制作一个手风琴垂直点击展示与关闭的效果

不想利用JQuery插件

求单纯的jquery 代码实现

当条目为一级分类 没有子分类的时候 不出现提示点击小图标或文本字符

如果条目为一级分类有子分类的时候 增加一个提示小图标或文本字符 如( + 或 ↓ )

点击一下展开 提示字符变成 - 或 ↑

再点击一下关闭 提示字符变成 +或 ↓

手风琴为垂直展示收缩 效果

忘JS/JQ高手不吝赐教

采纳后继续追分 先行谢过!!!!

<ul id="topBox">
<li class="topItem">
<a href="">一级分类 有子分类</a>
<ul class="subBox">
<li class="subItem"><a href="">二级分类</a></li>
<li class="subItem"><a href="">二级分类</a></li>
<li class="subItem"><a href="">二级分类</a></li>
<li class="subItem"><a href="">二级分类</a></li>
</ul>
</li>
<li class="topItem">一级分类 没有子分类</li>
<li class="topItem">一级分类 没有子分类</li>
<li class="topItem">一级分类 没有子分类</li>
<li class="topItem">
<a href="">一级分类 有子分类</a>
<ul class="subBox">
<li class="subItem"><a href="">二级分类</a></li>
<li class="subItem"><a href="">二级分类</a></li>
<li class="subItem"><a href="">二级分类</a></li>
<li class="subItem"><a href="">二级分类</a></li>
</ul>
</li>
<li class="topItem">一级分类 没有子分类</li>
<li class="topItem">一级分类 没有子分类</li>
<li class="topItem">一级分类 没有子分类</li>
<li class="topItem">
<a href="">一级分类 有子分类</a>
<ul class="subBox">
<li class="subItem"><a href="">二级分类</a></li>
<li class="subItem"><a href="">二级分类</a></li>
<li class="subItem"><a href="">二级分类</a></li>
<li class="subItem"><a href="">二级分类</a></li>
</ul>
</li>
</ul>

Answer 1

<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>

Answer 2

直接使用jquery ui http://jqueryui.com/accordion/

Answer 3

$("#topBox li").toggle(function(){
$(this).find("ul").show();

},function(){
$(this).find("ul").hide();
});

追问

谢谢你的回答
但用了这代码后 整个 .....
全部被默认隐藏了, 即使CSS 赋予 display:block 都无效