最开始给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>
</html>