jquery 点击查看更多箭头变化,文字变化,超出带滚动条。
2016-08-25 18:52
483 查看
从网上好了好久,没找到自己要的,自己写了一下。
<!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库
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
- html+js+jquery简单入门
- ajax from 回调函数 data 为空
- [置顶] 自己动手增强 jquery.multiselect2side 调用
- 基于Jquery的文本提示控件 poshytip
- JQuery 之 跳出循环
- jquery 省份选择器
- [置顶] jquery选择器的调试 -- 使用其他的日志工具
- 如何用js或则jquery过滤特殊字符
- jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
- jQuery-懒加载技术(简称lazyload)
- jquery 也不给力啊 unbind 你让我情何以堪!
- 不要盲目更新到 Jquery 1.3.2 , 存在内存泄露造成浏览器自动退出
- 该死的JQUERY AJAX函数
- jquery ready函数深入分析
- JQuery(二)DOM
- jQuery动画方法总结
- 10个jQuery特效(表格树插件)
- jquery运用