<!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>
jquery 点击查看更多箭头变化,文字变化,超出带滚动条。
最新推荐文章于 2022-11-07 15:03:29 发布