<style type="text/css">

.hi {

    width: 200px;

    height: 18vw;

    background-color: pink;

	font-weight: bold;

	font-size: 24px;

	overflow: hidden;

}

button {

	border: 1px solid red;

	padding: 10px;

	margin: 10px 0 0 66px;

}

</style>

</head>

<body>

<div class="hi">

	<p>hello world1!</p>

	<p>hello world2!</p>

	<p>hello world3!</p>

	<p>hello world4!</p>

	<p>hello world5!</p>

	<p>hello world6!</p>

	<p>hello world7!</p>

</div>

<button>more</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

	$('button').click(function() {

		var obj=$('.hi').height();

		if(obj=='180'){

			$('.hi').height('auto');

		} else {

			$('.hi').height('180px');

		}

	});

</script>

　　

jQ-点击查看更多的更多相关文章

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

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

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

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

  3. jquery 点击查看更多箭头变化，文字变化,超出带滚动条。

    从网上好了好久,没找到自己要的,自己写了一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

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

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

  5. iOS中"查看更多/收起"功能实现

    实现效果如图: 查看更多功能在很多app种都有应用,在这里简单的实现,介绍实现流程: 一个tableViewCell中包含一个collectionView,"查看更多"按钮是tab ...

  6. jquery 点击显示更多

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

  7. 微信小程序——收起和查看更多功能

    项目中做一些列表的时候,可能会需要做到 查看更多 及 收起功能,如下图所示: 大概的需求就是默认只显示2条,点击[查看更多]显示全部,点击[收起]还原. 实现的方法千万种.我来讲一下我的实现思路: 1 ...

  8. Vue:列表展开和收起（超过一定行数时显示‘查看更多’按钮）

    前言:前端小白记录的一些小功能~ 公司开发中的小程序中有做任务签到的功能,这就涉及到了任务列表以及对任务列表的展开和收起功能,好了可以开始了,说多了就烦了 1.首先是css样式,因为设计稿上是超过两行 ...

  9. 用自定义getElementByClassName函数做“查看更多”的特效

    <!DOCTYPE html> <html> <head> <title>查看更多</title> <meta charset=&qu ...

随机推荐

  1. 三剑客之一------>awk

    awk :  一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  2. mysql插入数据显示：Incorrect datetime value: '0000-00-00 00:00:00'

    1. 在进行mysql数据插入的时候,由于mysql的版本为5.7.1,部分功能已经升级,导致在datetime数据类型的影响下出现错误:   数据插入: mysql>insert into j ...

  3. VS2010-MFC（MFC应用程序框架分析）

    转自:http://www.jizhuomi.com/software/145.html 一.SDK应用程序与MFC应用程序运行过程的对比 程序运行都要有入口函数,在之前的C++教程中都是main函数 ...

  4. OpenCASCADE点向圆柱面投影

    OpenCASCADE点向圆柱面投影 eryar@163.com OpenCASCADE的类Extrema_ExtPElS提供了点到基本曲面的投影计算功能,距离可能是最大值或是最小值.如下图所示的点到 ...

  5. #、%和$符号在OGNL表达式中的作用

    #.%和$符号在OGNL表达式中经常出现,而这三种符号也是开发者不容易掌握和理解的部分.在这里笔者简单介绍它们的相应用途. 1．#符号的用途一般有三种.   1)访问非根对象属性,例如示例中的#ses ...

  6. Hie with the Pie (POJ 3311) 旅行商问题

    昨天想练习一下状态压缩,百度搜索看到有博客讨论POJ 3311,一看就是简单的旅行商问题,于是快速上手写了状态压缩,死活样例都没过... 画图模拟一遍原来多个城市可以重复走,然后就放弃思考了... 刚 ...

  7. java线程池的使用学习

    目录 1. 线程池的创建 2. 线程池的运行规则 3. 线程池的关闭 4. 线程池的使用场合 5. 线程池大小的设置 6 实现举例 1. 线程池的创建 线程池的创建使用ThreadPoolExecut ...

  8. elasticsearch 中文API(二)

    客户端 有多个地方需要使用Java client: 在存在的集群中执行标准的index, get, delete和search 在集群中执行管理任务 当你要运行嵌套在你的应用程序中的Elasticse ...

  9. 转载：Linux 安装Java

    1.到官网下载 jdk-8u131-linux-x64.tar.gz 官网地址:http://www.Oracle.com/technetwork/java/javase/downloads/jdk8 ...

  10. CAS企业级单点登录原理

    https://blog.csdn.net/anumbrella/article/details/80821486 1. 单点登录概述 1.1. 什么是单点登录? 单点登录:Single Sign O ...