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

<!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. sql 删除表中的重复记录

    嗯,遇见了表中存在重复的记录的问题,直接写sql删除时最快的,才不要慢慢的复制到excel表中慢慢的人工找呢.哼. 如下sql,找出重复的记录,和重复记录中ID值最小的记录(表中ID为自增长) sel ...

  2. Linux基础介绍【第五篇】

    linux权限位 Linux文件或目录的权限位是由9个权限位来控制,每三位为一组,它们分别是文件属主权限.属组权限.其他用户权限. r:read可读权限,对应数字4: w:write可写权限,对应数字 ...

  3. linux的top命令参数详解

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...

  4. oracle常用的快捷键

    最近在开发过程中,遇到一些麻烦,就是开发效率问题,有时候其他同事使用PLSQL 编程效率明显高于自己,观察了好久,才发现他使用PLSQL 已经很长时间了而且,他自己也在其中添加了好多快捷方式, 1.登 ...

  5. 作为前端er，写在年末的一些话

    写惯了技术类的文章,这种总结和唠嗑型的我基本也就在年末才来一篇.说实话,这种轻松类的文章往往比技术类的要受欢迎的多,因为其受众更广,看起来也不烧脑. 说来愧疚,这一年其实产出有点低,大致就写了不到二十 ...

  6. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  7. Lesson 17 Always young

    Text My aunt Jennifer is an actress. She must be at least thirty-five years old. In spit of this, sh ...

  8. CSharpGL(21)用鼠标拾取、拖拽VBO图元内的点、线或本身

    CSharpGL(21)用鼠标拾取.拖拽VBO图元内的点.线或本身 效果图 以最常见的三角形网格(用GL_TRIANGLES方式进行渲染)为例. 在拾取模式为GeometryType.Point时,你 ...

  9. iOS开发中静态库之".framework静态库"的制作及使用篇

    iOS开发中静态库之".framework静态库"的制作及使用篇 .framework静态库支持OC和swift .a静态库如何制作可参照上一篇: iOS开发中静态库之" ...

  10. vue vue-cli安装

    npm 更新 cnpm install -g npm Vue 的基本用法 Vue 相比于 React 和 Angular 容易上手多了,因此我对 Vue 的学习主要以文档为主,视频为辅(只有像我这种菜 ...