自己写的一个关于文章太长（展开全文的效果）
1 <div class="news-content"> 2 <div class="container"> 3 <h3 class="title">数字说话 限购满月天津楼市到底发生了什 4 么变化</h3> 5 <p class="times">房王网</p> 6 <!--<p class="illu">*本页涉及面积，如无特殊说明，均指面积</p>--> 7 <div class="min_height"> 8 <section class="stage"> 9 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 10 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 11 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 12 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 13 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 14 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 15 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 16 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 17 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 18 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 19 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 20 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 21 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 22 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 23 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 24 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 25 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 26 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 27 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 28 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 29 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 30 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 31 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 32 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 33 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 34 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 35 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 36 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 37 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 38 <p>近日，继北、上、广之后，深圳正式开启对商办物业的严控。此外，三亚、海口、武汉、芜湖等地纷纷再度收紧房地产相关政策。</p> 39 </section> 40 </div> 41 <a href="javascript:;" class="open">展开全文 <img src="img/down.png" style="width: 8px;"/></a> 42 </div> 43 </div>
以上是html部分
下面是css部分
.news-content { padding-top: 15px; padding-bottom: 30px; background: #FFFFFF; } .news-content .title { font-size: 19px; font-weight: bold; color: #222222; padding-bottom: 17px; } .news-content .times { padding-bottom: 5px; font-size: 12px; color: #999999; } .news-content .illu { font-size: 12px; color: #d1d1d3; } .news-content .min_height { height: auto; /*margin-bottom: 30px;*/ overflow: hidden; } .news-content .stage { padding-top: 20px; } .news-content .stage img { width: 100%; height: auto; } .news-content .stage p img { width: 100%; height: auto; } .news-content .open { display: inline-block; width: 100%; line-height: 30px; text-align: center; font-size: 14px; color: #f66b7e; } .news-content .open img { margin-left: 13px; vertical-align: middle; } .news-content .open img.up { transform:rotate(180deg); -ms-transform:rotate(180deg); /* IE 9 */ -moz-transform:rotate(180deg); /* Firefox */ -webkit-transform:rotate(180deg); /* Safari 和 Chrome */ -o-transform:rotate(180deg); /* Opera */ }
其中缺少修改默认样式的样式，这个大家的写法都不一样。有喜欢的可以问我单独要
js部分
记得引jquery文件哦
$(".open").click(function(){ var stage = $(".stage").height(); var minHeight = $(".min_height").height(); if(stage > minHeight){ $(".min_height").css("height","auto"); $(this).html("收起全文 <img src='img/down.png' class='up' style='width: 8px;'/>"); }else { $(this).html("展开全文 <img src='img/down.png' style='width: 8px;'/>"); $(".min_height").css("height","400px"); $('body,html').animate({scrollTop:0},500); } });
