【Jquery】 实现的展开折叠效果
代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>laofan</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.detail_content{
display: none;
}
</style>
</head>
<body>
<div>
<table>
这是表格内容
</table>
<div class="detail_click">
展开
</div>
<div class="detail_content">
这是详情
</div>
</div>
<div>
<table>
这是表格内容
</table>
<div class="detail_click">
展开
</div>
<div class="detail_content">
这是详情
</div>
</div>
<script type="text/javascript">
$('.detail_click').click(function(){
//$(this) 为 detail_click 实体
$(this).next().slideToggle('1000',function(){
//$(this) 为 detail_content 实体
// $(this).prev() 为 detail_click 实体
$(this).prev().text($(this).is(":visible") ? "收起" : "展开" );
});
})
</script>
</body>
</html>
欢迎做技术的朋友一起沟通交流!伸手党请绕道,
代码改变世界QQ群:453011886