blog
/
菜单伸缩.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-2.1.1.js"></script>
	<style>
	ul,li,p{list-style:none;margin:0;padding:0;}
	.body{width:auto;}
	li{cursor:pointer;margin:10px 0;}
	.li1 ul{padding-left:10px;}
	</style>
	<script>
	$(function(){
		$("p",$(".body")).next("ul").hide()
		$(".title1").on("click",function(){
			$(this).next("ul").slideToggle(200);
			$(this).closest("li").siblings("li").find("ul").slideUp(200);
		});
	})
	</script>
</head>
<body>
<div class="body">
	<ul class="ul1">
		<li class="li1">
			<p class="title1">标题一</p>
			<ul>
				<li class="li2">
					<p class="title1">标题二s</p>
					<ul>
						<li class="li2">内容</li>
						<li class="li2">内容</li>
						<li class="li2">内容</li>
						<li class="li2">内容</li>
					</ul>
				</li>
				<li class="li2">
					<p class="title1">标题二s</p>
					<ul>
						<li class="li2">内容</li>
						<li class="li2">内容</li>
						<li class="li2">内容</li>
						<li class="li2">内容</li>
					</ul>
				</li>
				<li class="li2">
					<p class="title1">标题二s</p>
					<ul>
						<li class="li2">内容</li>
						<li class="li2">内容</li>
						<li class="li2">内容</li>
						<li class="li2">内容</li>
					</ul>
				</li>
				<li class="li2"><p>标题二</p></li>
				<li class="li2"><p>标题二</p></li>
				<li class="li2"><p>标题二</p></li>
			</ul>
		</li>
		<li class="li1">
			<p class="title1">标题一</p>
			<ul>
				<li class="li2">内容</li>
				<li class="li2">内容</li>
				<li class="li2">内容</li>
				<li class="li2">内容</li>
			</ul>
		</li>
		<li class="li1">
			<p class="title1">标题一</p>
			<ul>
				<li class="li2">内容</li>
				<li class="li2">内容</li>
				<li class="li2">内容</li>
				<li class="li2">内容</li>
			</ul>
		</li>
	</ul>
</div>

</body>
</html>