<style>
ul{
list-style:none;
margin:0px;
padding:0px;
}
ul li{
margin-left:15px;
}
ul li a{
display:block;
height:30px;
width:80px;
line-height:30px;
text-decoration:none;
padding-left:15px;
}
.no{
display:none;
}
.yes{
display:block;
}
.page{
background:url("../img/page.png") no-repeat left center;
}
.plus{
background:url("../img/plus.png") no-repeat left center;
}
.minus{
background:url("../img/minus.png") no-repeat left center;
}
</style>
<script type="text/javascript" src="../jq/jquery-1.12.4.js"></script>
<script>
$(function(){
$("li").each(function(){
if($(this).children("ul").size()>0)//判斷li下是否有ul列表
{
//若是有隱藏ul，添加樣式
$(this).children("ul").eq(0).css("display","none");
$(this).children("a").first().addClass("plus");
//點擊一級列表
$("a").click(function(){
//判斷ul是否隱藏
if($(this).parent().children("ul").first().css("display")=="none")
{
$(this).parent().children("ul").first().css("display","block");
$(this).removeClass();
$(this).addClass("minus");
}
else
{
$(this).parent().children("ul").first().css("display","none");
$(this).removeClass();
$(this).addClass("plus");
}
})
}
else
{
$(this).children("a").eq(0).addClass("page");
}
})
})
</script>
</head>
<body>
<ul>
<li><a href="#">一級菜單1</a>
<ul>
<li><a href="#">一級菜單1</a>
<ul>
<li><a href="#">一級菜單1</a></li>
<li><a href="#">一級菜單1</a></li>
</ul>
</li>
<li><a href="#">一級菜單1</a></li>
</ul>
</li>
<li><a href="#">一級菜單1</a>
<ul>
<li><a href="#">一級菜單1</a></li>
<li><a href="#">一級菜單1</a></li>
</ul>
</li>
</ul>
</body>
</html>javascript
