从网上好了好久，没找到自己要的，自己写了一下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>more_up_arrows</title> <style type="text/css"> .w1000{width:1000px;margin:0 auto;} .mgt10{margin-top:10px;} .pop-view-more{ display:inline-block; width:180px; height:26px; border: 1px solid #cfd1d4; line-height:24px; text-align:center; border-radius: 4px; cursor: pointer; } .pop-view-more span{ margin-right:5px; color:#555; font-size:12px; } .pop-view-more i{ display:inline-block; width: 8px; height: 9px; background: url("http://images.cnblogs.com/cnblogs_com/iflygofy/817791/o_view_arrow_down.png") no-repeat 0 0; } .pop-view-more.up i{ background-position:0 -10px; } .more-content{ height:500px; padding:10px; border: 1px solid #cfd1d4; } </style> </head> <body> <div class="w1000"> <div class="pandect-con"> <div class="popup-box mgt10 clearfix"> <div class="more-option"> <label class="pop-view-more"><span>查看更多</span><i></i></label> </div> <div class="more-content" style="display:none;"> <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p> </div> </div> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).ready(function() { $(".pop-view-more").click(function(){ if($(".pop-view-more span").html() == '查看更多'){ $(this).addClass("up"); $(".more-content").show(); $(".pop-view-more span").html("点击收起"); $(".pandect-con").css({ height: "350px", overflow: "auto" }); $(".popup-box").css({ "388px"}); }else{ $(this).removeClass("up"); $(".more-content").hide(); $(".pop-view-more span").html("查看更多"); $(".pandect-con").css({ height: "auto" }); $(".popup-box").css({ "405px"}); } }); }); </script> </body> </html>