html+jquery模拟简单的树形展开

最新推荐文章于 2023-05-29 10:36:43 发布

uestc_lxp

最新推荐文章于 2023-05-29 10:36:43 发布

阅读量3.4k

点赞数 1

分类专栏： WEB前端

本文链接：https://blog.csdn.net/uestc_lxp/article/details/51366315

版权

WEB前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html+jquery模拟简单的树形展开

<!DOCTYPE html>
<html>
<head>
   <title>在线尝试 Bootstrap 实例</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	
	<style>
		.showClass {
			display:none;	
		}
		.hideClass {
			display:none;	
		}
	</style>
</head>
<body>
     <div>
		 <div id="div1" class="test">
			 <span>应用1</span>
			 <table style="display:none;margin-left:20px;">
				 <tr ><td>test1<td></tr>
				 <tr ><td>test1<td></tr>
				 <tr ><td>test1<td></tr>
				 <tr ><td>test1<td></tr>
			 </table>
		 </div> 
		 <div class="test">
			 <span>应用2</span>
			 <table style="display:none;margin-left:20px;">
				 <tr ><td>test2<td><td>test2<td></tr>
				 <tr ><td>test2<td></tr>
				 <tr ><td>test2<td></tr>
				 <tr ><td>test2<td></tr>
			 </table>
		 </div>
		 
		 <div class="test2">
			 <span>应用3</span>
			 <table style="margin-left:20px;" >
				 <tr ><td>test3<td></tr>
				 <tr ><td>test3<td></tr>
				 <tr ><td>test3<td></tr>
				 <tr ><td>test3<td></tr>
			 </table>
		 </div>
	</div>
</body>
<script>
	$(function(){
		$(".test").on("click",function(){
			if($(this).find("table").css("display")=="none") {
				$(this).find("table").css("display","block");
			} else {
				$(this).find("table").css("display","none");
			}
		});
		
		$(".test2").on("click",function(){
			$(this).find("table").toggleClass("showClass");
		});
	});
</script>
</html>

简单效果如下：