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

<!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>

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Thekingyu/article/details/78533738
文章标签: css jquery
个人分类: 前端样式
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭