<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. [JZOJ6011] 【NOIP2019模拟1.25A组】天天爱跑步

    题目 描述 题目大意 给你平面直角坐标系上的nnn个起点和nnn个终点,(x,y)(x,y)(x,y)每次只能走到(x,y+x)(x+y,y)(x,y−x)(x−y,y)(x,y+x)(x+y,y)( ...

  2. 菜鸟nginx源码剖析数据结构篇(十) 自旋锁ngx_spinlock[转]

    菜鸟nginx源码剖析数据结构篇(十) 自旋锁ngx_spinlock Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csd ...

  3. 利用IDEA构建springboot应用--controller例子

    微服务 微服务是一个新兴的软件架构,就是把一个大型的单个应用程序和服务拆分为数十个的支持微服务.一个微服务的策略可以让工作变得更为简便,它可扩展单个组件而不是整个的应用程序堆栈,从而满足服务等级协议. ...

  4. Android开发随笔

    1.线性布局LinearLayout时,用到layout_weight权重的使用 控件的宽度(高度)=自身宽度(高度)+剩余空间的所占比例 剩余空间(可以为负值)=屏幕宽-所有控件宽度(高度)< ...

  5. Python数据挖掘之决策树DTC数据分析及鸢尾数据集分析

    Python数据挖掘之决策树DTC数据分析及鸢尾数据集分析 今天主要讲述的内容是关于决策树的知识,主要包括以下内容:1.分类及决策树算法介绍2.鸢尾花卉数据集介绍3.决策树实现鸢尾数据集分析.希望这篇 ...

  6. 数据库备份还原——mysqlbackup与mysqldump对比测试

    1      环境描述 1.1      硬件环境 服务器类型:华为RH5885 IP: 10.148.128.100 内存: 64G 物理CPU个数:4 CPU核数:8 逻辑CPU个数:64 Int ...

  7. Spring Boot 集成Jsp与生产环境部署

    一.简介 提起Java不得不说的一个开发场景就是Web开发,也是Java最热门的开发场景之一,说到Web开发绕不开的一个技术就是JSP,因为目前市面上仍有很多的公司在使用JSP,所以本文就来介绍一下S ...

  8. HBase OpenTSDB

  9. java linkedlist和arraylist添加元素时性能比较

  10. Luogu P2272 [ZJOI2007]最大半连通子图(Tarjan+dp)

    P2272 [ZJOI2007]最大半连通子图 题意 题目描述 一个有向图\(G=(V,E)\)称为半连通的\((Semi-Connected)\),如果满足:\(\forall u,v\in V\) ...