关闭

四层树状数据展示,无样式

标签: cssjquery
113人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		ul{
			list-style: none;
		}
		.two{
			display: none;
		}
		.three{
			display: none;
		}
		.four{
			display: none;
		}
	</style>
	<body>	
		<div>
			
			<ul>
				
				<p class="one">第一层</p>
				<li class="two">					
					<ul>
						
						<p class="two2">第二层</p>
						<li  class="three">							
							<ul>
								
								<p class="three2">第三层</p>
								<li  class="four">
									<ul>
									     <li>第四层</li>	
									      <li>第四层</li>	
									       <li>第四层</li>	
									</ul>
								</li>
								
								<p class="three2">第三层</p>
								<li  class="four">
									<ul>
									     <li>第四层</li>	
									      <li>第四层</li>	
									       <li>第四层</li>	
									</ul>
								</li>
								
							</ul>
						</li>				
			</ul>
		</div>
		
		
		
	</body>
	<script type="text/javascript">
		$(".one").click(function(){
			console.log(1)
			if($(this).next().css('display') == 'none'){				
				$(this).next().show()
			}else{
				$(this).next().hide()				
			}			
		})
		
		$(".two2").click(function(){
			console.log(1)
			if($(this).next().css('display') == 'none'){				
				$(this).next().show()
			}else{
				$(this).next().hide()				
			}			
		})
		
		$(".three2").click(function(){
			console.log(1)
			if($(this).next().css('display') == 'none'){				
				$(this).next().show()
			}else{
				$(this).next().hide()				
			}			
		})
	</script>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1029次
    • 积分:125
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档