<!DOCTYPE html>
<!-- by longdd 2013.4.23-->
<html>
<head>
<title>无限极分类折叠菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body{background-color:#B5BDBF;}
.types ul{
display:none;
border: solid 1px #000;
}
.types li span{
display:block;
max-width: 150px;
height: 30px;
line-height: 30px;
border:solid 1px #000;
border-radius: 5px;
margin: 5px;
text-align: center;
}
.types>ul{
display:block;
}
</style>
<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('.types li').each(function(i) {
$(this).click(function(event) {
//阻止冒泡事件
event.stopPropagation();
if ($(this).children('ul').css('display') === 'block') {
$(this).children('ul').css('display', 'none');
} else {
$(this).children('ul').css('display', 'block');
}
});
});
});
</script>
</head>
<body>
<div class="types">
<ul>
<li>
<span>选项1</span>
<ul>
<li>
<span>选项1-1</span>
<ul>
<li><span>选项1-1-1</span></li>
<li><span>选项1-1-2</span></li>
<li><span>选项1-1-3</span></li>
<li><span>选项1-1-4</span></li>
<li><span>选项1-1-5</span></li>
</ul>
</li>
<li>
<span>选项1-2</span>
<ul>
<li><span>选项1-2-1</span></li>
<li><span>选项1-2-2</span></li>
<li><span>选项1-2-3</span></li>
<li><span>选项1-2-4</span></li>
<li><span>选项1-2-5</span></li>
</ul>
</li>
<li><span>选项1-3</span></li>
<li><span>选项1-4</span></li>
<li><span>选项1-5</span></li>
</ul>
</li>
<li>
<span>选项2</span>
<ul>
<li>
<span>选项2-1</span>
<ul>
<li><span>选项2-1-1</span></li>
<li><span>选项2-1-2</span></li>
<li><span>选项2-1-3</span></li>
<li><span>选项2-1-4</span></li>
<li><span>选项2-1-5</span></li>
</ul>
</li>
<li><span>选项2-2</span></li>
<li><span>选项2-3</span></li>
<li><span>选项2-4</span></li>
<li><span>选项2-5</span></li>
</ul>
</li>
<li>
<span>选项3</span>
<ul>
<li>
<span>选项3-1</span>
<ul>
<li><span>选项3-1-1</span></li>
<li><span>选项3-1-2</span></li>
<li><span>选项3-1-3</span></li>
<li><span>选项3-1-4</span></li>
<li><span>选项3-1-5</span></li>
</ul>
</li>
<li><span>选项3-2</span></li>
<li><span>选项3-3</span></li>
<li><span>选项3-4</span></li>
<li><span>选项3-5</span></li>
</ul>
</li>
<li><span>选项4</span></li>
<li><span>选项5</span></li>
</ul>
</div>
</body>
</html>