jq 元素标签刚开始显示一部分点击展开全部显示完全

最新推荐文章于 2025-01-21 09:36:24 发布

a369885

最新推荐文章于 2025-01-21 09:36:24 发布

阅读量604

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/NightWalker/p/7613938.html

版权

最开始给p标签一个固定高度，设置超出隐藏。在jq中判断p元素的css是不是隐藏，隐藏的时候点击让其显示，高度自适应（恢复到原来应有的高度），否则则隐藏，恢复到固定高度

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>测试</title>
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.pinfo { height: 56px; white-space: normal; overflow: hidden; }
.mui-btn-block { padding: 0; background: #CCCCCC; color: rgba(0, 0, 0, 0.5); }
</style>
</head>
<body>
<div class="mui-media-body">
<p class="pinfo">
需求详情:<span>
阿德法苏打撒旦发射点发三天内金额更是得噶阿所发生的发射点发按时
阿德法苏打撒旦发射点发三天内金额更是得噶阿所发生的发射点发按时
阿德法苏打撒旦发射点发三天内金额更是得噶阿所发生的发射点发按时
阿德法苏打撒旦发射点发三天内金额更是得噶阿所发生的发射点发按时
阿德法苏打撒旦发射点发三天内金额更是得噶阿所发生的发射点发按时
阿德法苏打撒旦发射点发三天内金额更是得噶阿所发生的发射点发按时
</span>
</p>
<button class="mui-btn mui-btn-block zhanbtn">
展开全部<i class="mui-icon mui-icon-arrowdown shang"></i>
</button>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.zhanbtn').click(function(){
if($(this).siblings('p.pinfo').css('overflow')=='hidden'){
$(this).siblings('p.pinfo').css({'overflow':'visible','height':'auto'});
$(this).html('收起全部 <i class="mui-icon mui-icon-arrowup shang"></i>');
}else{
$(this).siblings('p.pinfo').css({'overflow':'hidden','height':'63px'});
$(this).html('展开全部 <i class="mui-icon mui-icon-arrowdown shang"></i>');
}
});
})
</script>
</body>