最開始給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>