<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0; padding:0;}
.box{ width: 600px; margin: 0 auto; }
.p1{ width: 200px; height: 30px; line-height: 30px; text-align: center; background: #B73A3A; color: #fff;}
.content{ border:1px solid #ddd; width: 180px; height: 200px; padding:10px; display: none;}
</style>
</head>
<body>
<div class="box">
<p class="p1" onclick="var oDiv = document.getElementById('J_content');(oDiv.style.display == 'block')?(oDiv.style.display = 'none'):(oDiv.style.display = 'block')" >點擊</p>
<div class="content" id="J_content">
<p>了更健康的就感慨了結果聊看看發幾個六塊腹肌剛看了發幾個及關聯方寄過來的加工費</p>
</div>
</div>
</body>
</html>
如圖所示：
展開效果圖：
第二：jQuery的寫法：
html:
<div class="result_list_more" id="showMore"><a href="javascript:void(0)">展開全部</a></div>
js：
$(function(){ let dnum = 0; let showMore = $("#showMore");//更多 let resultList = $("#resultList"); //外層 showMore.find("a").on("click",function(){ dnum = dnum + 1; if(dnum % 2 != 0){ resultList.css("height", "auto"); $(this).addClass("result_rotate").html("收起全部") }else{ resultList.css("height", "1rem"); $(this).removeClass("result_rotate").html("展開全部") } }) })
css:
/* 展開更多 */ .result_list_more{ height: 0.5rem; line-height: 0.5rem; background-color: #fff; overflow: hidden; text-align: center} .result_list_more a{ position: relative; display: inline-block; text-indent: -0.2rem; font-size: 0.18rem;} .result_list_more a::after{ content: ""; position: absolute; right: -0.2rem; top:0.158rem; font-size: 0.18rem; width: 0.1rem; height: 0.1rem; border-top:2px solid #333; border-right: 2px solid #333; -ms-transform:rotate(135deg); -moz-transform:rotate(135deg); -webkit-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg);} .result_list_more .result_rotate::after{top:0.24rem; -ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);}
效果圖：
