從網上好了好久，沒找到自己要的，自己寫了一下。 ...
從網上好了好久，沒找到自己要的，自己寫了一下。
<!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({ width: "388px"}); }else{ $(this).removeClass("up"); $(".more-content").hide(); $(".pop-view-more span").html("查看更多"); $(".pandect-con").css({ height: "auto" }); $(".popup-box").css({ width: "405px"}); } }); }); </script> </body> </html>
