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

<!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. SVN版本冲突，导致出现Files 的值“ < < < < < < < .mine”无效

    只要根据错误提示,找到相应文件夹下的\obj\Debug文件夹下的 相应名字.csproj.FileListAbsolute.txt, 打开并删除含有'<<<<<< ...

  2. 喜马拉雅音频下载器 V1.2 支持专辑批量下载 喜马拉雅mp3下载导出 喜马拉雅下载器

    出差一个星期回来看邮箱,发现好多网友评论说网站又更新了,老程序不能用了,有热心网友放出修改版的,我就不重复造车了..大家可以去这里下载 http://blog.csdn.net/suqingheang ...

  3. Node.js Express连接mysql完整的登陆注册系统(windows)

    windows学习环境: node 版本: v0.10.35 express版本:4.10.0 mysql版本:5.6.21-log 第一部分:安装node .Express(win8系统 需要&qu ...

  4. JavaScript中undefined与null的区别

    通常情况下, 当我们试图访问某个不存在的或者没有赋值的变量时,就会得到一个undefined值.Javascript会自动将声明是没有进行初始化的变量设为undifined. 如果一个变量根本不存在会 ...

  5. ABP源码分析三十七：ABP.Web.Api Script Proxy API

    ABP提供Script Proxy WebApi为所有的Dynamic WebApi生成访问这些WebApi的JQuery代理,AngularJs代理以及TypeScriptor代理.这些个代理就是j ...

  6. 【MSP是什么】MSP认证之成功的项目群管理

    同项目管理相比,项目群管理是为了实现项目群的战略目标与利益,而对一组项目进行的统一协调管理. 项目群管理 项目群管理是以项目管理为核心.单个项目上进行日常性的项目管理,项目群管理是对多个项目进行的总体 ...

  7. .NET 程序集单元测试工具 SmokeTest 应用指南

    Smoke Test(冒烟测试),也称Regression Test(回归测试),是对软件的安装和基本功能的测试.一般地我们使用脚本来实现Smoke Test的自动化,可借用虚拟机的snapshot机 ...

  8. Bootstrap3插件系列：bootstrap-select2

    1.下载插件 https://github.com/select2/select2 http://select2.github.io/ 2.引用插件 <script src="~/Sc ...

  9. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  10. web api添加拦截器

    实现思路 1.标识控制器有拦截特性: 2.控制器拦截处理: 代码实现 1.标识控制器有拦截特性,代码: [MyFilter] public string PostFindUser([FromBody] ...