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

<!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. maven常见异常以及解决方法

    本文写的是我在整合ssm框架时遇到的一些问题,我估计很多人也会遇到,所以,这里作为一个总结,希望能够帮助大家解决问题 一,加入shiro组件时抛出的异常 加入步骤(略) 问题 1,保存后,无法导入sh ...

  2. mono -图片处理

    这篇文章中您将了解到以下内容 保存Bitmap WebClient文件上传 向服务端传递数据 保存Bitmap 做移动端开发,图片上传下载是最普通的需求了. 在mono for android中按照资 ...

  3. 揭秘Windows10 UWP中的httpclient接口[2]

    阅读目录: 概述 如何选择 System.Net.Http Windows.Web.Http HTTP的常用功能 修改http头部 设置超时 使用身份验证凭据 使用客户端证书 cookie处理 概述 ...

  4. 一步一步使用ABP框架搭建正式项目系列教程之本地化详解

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 本篇目录 扯扯本地化 ABP中的本地化 小结 扯扯本地化 本节来说说本地化,也有叫国际化.全球化的,不管怎么个叫法,反正道理都是一 ...

  5. .NET 基础一步步一幕幕[面向对象前言]

    面向对象前言 2017年的第一篇博文,好久不写博文了,赶紧补上,感觉在以前的<.NET 基础一步步一幕幕>系列博客中,简短的小知识点已经介绍的差不多的(PS:如果还有别的基础知识点我没有介 ...

  6. bootstrap表格

    Bootstrap 实例 - 边框表格 < 建立日期 2015-5-27 录入人员 test1 处理人员 test2 问题报障人   部门/城市公司   联系电话   问题类型   处理状态   ...

  7. Windows 10 部署Enterprise Solution 5.5

    Windows 10正式版发布以后,新操作系统带来了许多的变化.现在新购买的电脑安装的系统应该是Windows 10.与当初用户不习惯Windows 7,购买新电脑后第一个想做的事情就是重装成XP,估 ...

  8. 【Win10 应用开发】使用“实时可视化树”工具查看应用界面元素

    记得有朋友问老周,系统中的“计算器”应用的界面菜单是怎么做的.其实,你可以用VS 2015的新工具来查看它的界面结构. 实时可视化树工具只能查看XAML定义的界面,如WPF和Win App.现在,Wi ...

  9. nginx+php 在windows下的简单配置安装

    开始前的准备 PHP安装包下载:http://windows.php.net/downloads/releases/php-5.5.14-Win32-VC11-x86.zip Nginx 下载地址:h ...

  10. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...