从网上好了好久，没找到自己要的，自己写了一下。

<!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 点击查看更多箭头变化，文字变化,超出带滚动条。的更多相关文章

  1. JS点击查看更多内容 控制段落文字展开折叠

    JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...

  2. 利用ScrollView滑动属性实现点击查看更多

    利用ScrollView的滚动实现点击查看更多 效果图 更新内容布局 <ScrollView android:id="@+id/sv_des" android:layout_ ...

  3. jquery 点击查看，收起特效

    <div class="all"> <p><a href="javascript:;" id="onvk"&g ...

  4. jquery 点击显示更多

    点击显示更多 html <div class="servicepicture banxin"> <div class="imgcontent" ...

  5. angular点击查看更多（简单demo）

    今天来跟大家分享一个小的demo,一般网页浏览到底部的时候会有一个点击加载更多的按钮,之前一直纠结怎么写这个,今天学习angular时发现可以用组件来实现这么一个小的效果,大家有兴趣的话可以看一下. ...

  6. jQuery 点击查看 收起

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jQ-点击查看更多

    <style type="text/css"> .hi { width: 200px; height: 18vw; background-color: pink; fo ...

  8. jQuery自动加载更多程序

    1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...

  9. jQuery自动加载更多程序（转）

    jQuery自动加载更多程序   1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据 ...

随机推荐

  1. Prometheus 系统监控方案 一

    最近一直在折腾时序类型的数据库,经过一段时间项目应用,觉得十分不错.而Prometheus又是刚刚推出不久的开源方案,中文资料较少,所以打算写一系列应用的实践过程分享一下. Prometheus 是什 ...

  2. SpringMVC 数据校验

    1.引入jar包 2.配置验证器 <!-- 配置验证器 --> <bean id="myvalidator" class="org.springfram ...

  3. 【转】ofbiz数据库表结构设计

    真心不错的文章,可以加深对企业信息化的设计理解:) http://blog.sina.com.cn/s/blog_a2ca5d8c01017fa0.html http://blog.sina.com. ...

  4. 企业IT管理员IE11升级指南【16】—— 使用Compat Inspector快速定位IE兼容性问题

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  5. Java基础知识（贰）

    一.面向对象 Java中的面向对象与C#的面向对象,本质都是一样.所以对于学过C#的同学理解Java中面向对象的概念就比较轻松. 对象 定义: 万物皆对象,客观存在的事物都称为对象. 1.面向对象 类 ...

  6. iOS中数据库应用基础

    iOS 数据库入门 一.数据库简介 1.什么是数据库? 数据库(Database) 是按照数据结构来组织,存储和管理数据的仓库 数据库可以分为2大种类 关系型数据库(主流) PC端 Oracle My ...

  7. WCF学习之旅—WCF服务部署到IIS7.5（九）

    上接   WCF学习之旅—WCF寄宿前的准备(八) 四.WCF服务部署到IIS7.5 我们把WCF寄宿在IIS之上,在IIS中宿主一个服务的主要优点是在发生客户端请求时宿主进程会被自动启动,并且你可以 ...

  8. My First Android Application Project 第一个安卓应用

    一.前言: 安卓(Android):是一种基于Linux的自由及开放源代码的操作系统,主要用在移动设备上,如手机.平板电脑.其他的设备也有使用安卓操作系统,比如:电视机,游戏机.数码相机等等. 二.具 ...

  9. ElasticSearch 5学习(2)——Kibana+X-Pack介绍使用（全）

    Kibana是一个为 ElasticSearch 提供的数据分析的 Web 接口.可使用它对日志进行高效的搜索.可视化.分析等各种操作.Kibana目前最新的版本5.0.2,回顾一下Kibana 3和 ...

  10. ASP.NET MVC5+EF6+EasyUI 后台管理系统（18）-权限管理系统-表数据

    系列目录 这一节,我们插入数据来看看数据流,让各位同学,知道这个权限表交互是怎么一个流程,免得大家后天雾里来雾里去首先我再解释一些表,SysUser和SysRole表不用解释了. SysRoleSys ...