<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. Loadrunner学习---脚本编写(1)

    Loadrunner学习---脚本编写(1) 中午看了两集<奋斗>发现越看越想看,但是想到好不容易没上班,在家还是赶紧学习下LR的知识吧.下面这个网页的文章原来也是看过的,但发现没几天就忘 ...

  2. Ubuntu 18.04 Linux上安装Etherpad,基于Web的实时协作编辑器

    介绍 Etherpad是一个开源的,基于Web的实时协作编辑器(http://www.0834nanke.com) 它允许多个人使用他们的Web浏览器同时编辑文档. 它还提供了一些很酷的功能,如富文本 ...

  3. day04 - linux常用命令、目录说明以及ubuntu解锁root用户，安装tree命令

    echo abcdefg >> aa.txt //向aa.txt文件末尾追加 abcdefg 字符串 1 基础命令: clear //清屏 whoami //查看当前所登录的用户 who ...

  4. 18多校8th

    a-容斥原理(带限制的不定方程) #include<bits/stdc++.h> using namespace std; #define mod 998244353 #define ll ...

  5. JavaSE_12_序列化流和打印流

    1.1 序列化流概述 Java 提供了一种对象序列化的机制.用一个字节序列可以表示一个对象,该字节序列包含该对象的数据.对象的类型和对象中存储的属性等信息.字节序列写出到文件之后,相当于文件中持久保存 ...

  6. mysql order by排序查询速度问题

    SELECT * FROM `assets_message` LEFT JOIN purchase_message ON assets_message.purchase_id = purchase_m ...

  7. vue 单纯的获取经纬度 百度与高德 H5

    首先用百度的api举个例子 首先在index页面引入如下: <script type="text/javascript" src="http://api.map.b ...

  8. Logback 日志组件的使用

    Logback 是由 log4j 创始人设计的又一个开源日志组件. 一. logback 的介绍 ​ logback 当前分成三个模块:logback-core,logback- classic 和 ...

  9. Cesium官方教程7--三维模型

    原文地址:https://cesiumjs.org/tutorials/3D-Models-Tutorial/ 三维模型 (3D Models) 这篇教程给大家介绍,如何在Cesium中通过Primi ...

  10. PKU--3211 Washing Clothes（01背包）

    题目http://poj.org/problem?id=3211 分析:两个人洗衣服,可以同时洗,但是只能同时洗一种颜色. 要时间最短,那么每一种颜色的清洗时间最短. 转换为,两个人洗同一种颜色的衣服 ...