<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. 设置IDEA中properties文件显示中文

    路径: File - Setting - Editor - Code Style - File Encodings

  2. JedisCluster API 整理

    windows版redis启动服务器命令:redis-server redis.windows.conf 图表来自菜鸟教程: 列表的操作命令 序号 命令及描述 1 BLPOP key1 [key2 ] ...

  3. 0901NOIP模拟测试赛后总结

    突然想学迪哥列一下分数线搞清楚自己和别人的差距. rank1- 5- 6-分. 差距很大啊.尤其是和某kyh.大家都开玩笑说天皇是个变态.但是事实摆在这儿,同样坐在机房这么长的时间,人家又AK了. 我 ...

  4. 莫烦PyTorch学习笔记(四)——回归

    下面的代码说明个整个神经网络模拟回归的过程,代码含有详细注释,直接贴下来了 import torch from torch.autograd import Variable import torch. ...

  5. CSS或HTML如何实现文字下面加点?

    就像word里文字加着重号一样,在字的下面加一个点,用CSS怎么做?注意,我说的是下面加点,不是文字加粗或倾斜,请不要回答<strong>或<em>之类的. 把要着重加点的文字 ...

  6. Android基础控件ScrollView滚动条的使用

    1.简介 ScrollView是一个FrameLayout的容器,不过在他的基础上添加了滚动,允许显示的比实际多的内容!另外,只能够往里面放置一个子元素,可以是单一的组件,又或者一个布局包裹着的复杂的 ...

  7. 比特承诺 Bit Commitment

    Introduction-A story  Alice:股票经纪人 Bob:股民   Alice:你的钱交给我,我替你买股票,我专业,挣钱多!   Bob:怎么证明?   Alice:我们上月买进的1 ...

  8. T2988 删除数字【状压Dp+前缀和优化】

    Online Judge:从Topcoder搬过来,具体哪一题不清楚 Label:状压Dp+前缀和优化 题目描述 给定两个数A和N,形成一个长度为N+1的序列,(A,A+1,A+2,...,A+N-1 ...

  9. jiba中文分词原理

    中文分词就是将一个汉字序列分成一个一个单独的词. 现有的分词算法有三大类: 基于字符串匹配的分词:机械分词方法,它是按照一定的策略将待分析的字符串与一个充分大的机器词典中的词条进行匹配,若在词典中找到 ...

  10. UVA - 1230

    https://vjudge.net/problem/UVA-1230 费马小定理优化快速幂 #include <iostream> #include <cstdio> #in ...