<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. 阿里云容器服务通过LoadBalancer暴露IPv6服务

    背景: IPv4地址已接近枯竭,被誉为下一代互联网技术的IPv6成为新的“全球互联网门牌号”,它可以让地球上的每一粒沙子都拥有地址.当下,各国都在加速推进下一代互联网的部署,工信部也互联网服务商提出了 ...

  2. Linux网桥端口的arp问题

    Linux的brctl addif命令可以将一个接口加入到既有的网桥中,接下来,这个接口就成了brport,属于一个从属的接口,然而你还是可以看到它的,并且可以为它添加IP地址,然后route命令会显 ...

  3. x64：x64

    ylbtech-x64:x64 “x86-64”,有时会简称为“x64”,是64位微处理器架构及其相应指令集的一种,也是Intel x86架构的延伸产品.“x86-64”1999由AMD设计,AMD首 ...

  4. HTML 颜色表示

    三种表示方法 1 颜色单词 : blue green red pink 2 10进制表示: RGB(255, 10, 0) 3 16进制表示: #FF0000(红)  #00FF00(绿)

  5. 报错initscripts conflicts with redhat-release-server-7.0-1.el7.x86_64

    报错 解决:删除冲突的rpm包即可 rpm -e redhat-release-server-7.0-1.el7.x86_64 --nodeps

  6. JavaEE三层架构

    三层架构         三层架构是javaee规范中的推荐架构,传统意义上是分为表示层(UI).业务逻辑层(BLL).数据访问层(DAL).在javaee的开发中,三层架构具体分为表示层(web层) ...

  7. c++设计模式：模板模式

    模板模式和策略模式的区别: 模板方法模式的主要思想:定义一个算法流程,将一些特定步骤的具体实现.延迟到子类.使得可以在不改变算法流程的情况下,通过不同的子类.来实现“定制”流程中的特定的步骤. 策略模 ...

  8. LUOGU P2280 [HNOI2003]激光炸弹

    传送门 解题思路 二维前缀和. 代码 #include<iostream> #include<cstdio> #include<cstring> using nam ...

  9. 微信小程序——页面跳转传值

    比如从index.wxml跳转到aaa.wxml index.wml <navigator url="../aaa/aaa?id=1" > </navigator ...

  10. vue v-for详解

    1.Vue动态渲染列表------v-for用法详解: Html: <figure v-for="list in lists">     <div>     ...