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

<!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. 《MySQL必知必会》学习笔记

    数据库:数据库是一种以某种有组织的方式存储的数据集合.其本质就是一个容器,通常是一个或者一组文件. 表:表示一种结构化的文件,可用来存储某种特定类型的数据. 模式:描述数据库中特定的表以及整个数据库和 ...

  2. ubuntu安装ANSYS17.2全过程

    本次介绍在Ubuntu kylin1604下安装Ansys 17.2的全部过程. 1 安装文件准备 关于ANSYS的软件安装文件,在网络上可以找到.这里采用SSQ版本的安装文件,如图所示,包含一个名为 ...

  3. vue2.0构建淘票票webapp

    项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...

  4. shell之sort命令

    1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. [rocrocket@rocrocket progr ...

  5. CentOS Mono Nginx 部署 MVC4+WebApi

    CentOS Mono Nginx 部署 MVC4+WebApi 经过几天的折磨,终于在CentOS上成功部署了MVC4+WebApi.Mono上的服务器推荐两种:Jexus(国产高人写的一款很牛的服 ...

  6. Hadoop学习笔记系列文章导航

    一.为何要学习Hadoop? 这是一个信息爆炸的时代.经过数十年的积累,很多企业都聚集了大量的数据.这些数据也是企业的核心财富之一,怎样从累积的数据里寻找价值,变废为宝炼数成金成为当务之急.但数据增长 ...

  7. Hadoop学习笔记—22.Hadoop2.x环境搭建与配置

    自从2015年花了2个多月时间把Hadoop1.x的学习教程学习了一遍,对Hadoop这个神奇的小象有了一个初步的了解,还对每次学习的内容进行了总结,也形成了我的一个博文系列<Hadoop学习笔 ...

  8. 免费的精品: Productivity Power Tools 动画演示

    Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率.它的出现一定程度上弥补和完善了 Visual Studio 自身的不足, ...

  9. Spring Bean详细讲解

    什么是Bean? Spring Bean是被实例的,组装的及被Spring 容器管理的Java对象. Spring 容器会自动完成@bean对象的实例化. 创建应用对象之间的协作关系的行为称为:装配( ...

  10. Android-TextView跑马灯效果

    要实现跑马灯还是比较简单的. 同时有几个需要注意的点,先上代码: public class MTView extends TextView { public MTView(Context contex ...