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

最新推荐文章于 2025-10-13 02:00:00 发布

原创最新推荐文章于 2025-10-13 02:00:00 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

WEB前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用HTML和jQuery实现的简单树形菜单展开效果。通过点击不同的菜单项可以展示或隐藏其子菜单，提供了两种不同的实现方式。

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>

简单效果如下：