<html>
<head>
<meta?charset="utf-8">
<title>document</title>
<style?type="text/css">
*{margin:0;padding:0;}
a{text-decoration:?none;}
li{list-style:?none;}
#list{width:200px;margin:30px?auto;}
#list?.son{display:?none;}
</style>
</head>
<body>
<ul?id="list">
<li?class="main">
<p><span>+</span>商品管理</p>
<ul?class="son">
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
</ul>
</li>
<li?class="main">
<p><span>+</span>商品管理</p>
<ul?class="son">
<li>22222222</li>
<li>22222222</li>
<li>22222222</li>
<li>22222222</li>
<li>22222222</li>
</ul>
</li>
<li?class="main">
<p><span>+</span>商品管理</p>
<ul?class="son">
<li>33333333</li>
<li>33333333</li>
<li>33333333</li>
<li>33333333</li>
<li>33333333</li>
</ul>
</li>
<li?class="main">
<p><span>+</span>商品管理</p>
<ul?class="son">
<li>44444444</li>
<li>44444444</li>
<li>44444444</li>
<li>44444444</li>
<li>44444444</li>
</ul>
</li>
<li?class="main">
<p><span>+</span>商品管理</p>
<ul?class="son">
<li>55555555</li>
<li>55555555</li>
<li>55555555</li>
<li>55555555</li>
<li>55555555</li>
</ul>
</li>
</ul>
<script?type="text/javascript">
//這是有js和jq兩種寫法，任取壹種，兩種不要同時存在
//如果選擇jq寫法，記得引入jq文件
//js寫法：
window.onload?=?function(){
var?main?=?document.getElementsByClassName("main");
var?son?=?document.getElementsByClassName("son");
var?p?=?document.getElementsByTagName("p");
for(var?i?=?0;i<p.length;i++){
p[i].index?=?i;
p[i].onclick?=?function(){
for(var?j?=?0;j<son.length;j++){
son[j].style.display="none";
p[j].getElementsByTagName("span")[0].innerText="+";
}
var?dom?=?this.getElementsByTagName("span")[0];
if(?dom.className==""){
dom.className="min";
dom.innerText="-";
son[this.index].style.display="block";
}else{
dom.className="";
dom.innerText="+";
son[this.index].style.display="none";
}
}
}
}
//jq寫法
$(function(){
$("#list?p").click(function(){
var?t?=?$(this).find("span").text();
t=="+"?t="-":t="+";
$(this).next().slideToggle().parent().siblings().find(".son").hide();
$(this).parent().siblings().find("span").text("+");
$(this).find("span").text(t)
})
})
</script>
</body>
</html>