jq 元素标签刚开始显示一部分 点击展开全部 显示完全

最开始给p标签一个固定高度,设置超出隐藏。在jq中判断p元素的css是不是隐藏,隐藏的时候点击让其显示,高度自适应(恢复到原来应有的高度),否则则隐藏,恢复到固定高度

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>测试</title>
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.pinfo { height: 56px; white-space: normal; overflow: hidden; }
.mui-btn-block { padding: 0; background: #CCCCCC; color: rgba(0, 0, 0, 0.5); }
</style>
</head>
<body>
<div class="mui-media-body">
<p class="pinfo">
需求详情:<span>
阿德法苏打撒旦发射点发三天内金额更是得噶阿所发生的发射点发按时
阿德法苏打撒旦发射点发三天内金额更是得噶阿所发生的发射点发按时
阿德法苏打撒旦发射点发三天内金额更是得噶阿所发生的发射点发按时
阿德法苏打撒旦发射点发三天内金额更是得噶阿所发生的发射点发按时
阿德法苏打撒旦发射点发三天内金额更是得噶阿所发生的发射点发按时
阿德法苏打撒旦发射点发三天内金额更是得噶阿所发生的发射点发按时
</span>
</p>
<button class="mui-btn mui-btn-block zhanbtn">
展开全部<i class="mui-icon mui-icon-arrowdown shang"></i>
</button>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(‘.zhanbtn‘).click(function(){
if($(this).siblings(‘p.pinfo‘).css(‘overflow‘)==‘hidden‘){
$(this).siblings(‘p.pinfo‘).css({‘overflow‘:‘visible‘,‘height‘:‘auto‘});
$(this).html(‘收起全部 <i class="mui-icon mui-icon-arrowup shang"></i>‘);
}else{
$(this).siblings(‘p.pinfo‘).css({‘overflow‘:‘hidden‘,‘height‘:‘63px‘});
$(this).html(‘展开全部 <i class="mui-icon mui-icon-arrowdown shang"></i>‘);
}
});
})
</script>
</body>

</html>

时间: 2024-10-19 22:07:34

jq 元素标签刚开始显示一部分 点击展开全部 显示完全的相关文章

listview嵌套gridview,并实现grid元素部分显示以及点击展开与折叠

原文链接:http://blog.csdn.net/duguju/article/details/49538341 有时我们需要用GridView显示目录列表,有时甚至是二级的,即listview每一个item里面又各自嵌入一个gridview,但是当二级目录(数据条目)的数量过多时,界面会比较臃肿,这时我们就想要有类似展开与折叠的效果,作者采用的策略是数据分段的分别显示,其中对于显示边界(处于限制显示数目的特定位置)的控件要有数据的动态更新和点击判断操作.效果如图: 具体实现: 一.Activ

Jquery 第三课(jq元素:获取、添加、删除、设置、绑定、显示隐藏、回调、动画)

1.获取内容: text():获取文本内容.text获取的是文本内容,假设被指定的<div>里面还有各种标签,text也只获取里面的纯文本内容. html():获取括号内内容.而html则是获取里面的全部内容,包括标签也会一起打印出来. [例] $(“#d1”).text(“aaaaa”); //打印出 aaaaa $(“#d1”).html(“<div>aaaa</div>”); //打印出<div>aaaa</div> 2.添加元素: $(A

2015.7.23 第十二课 课程重点(jq元素:获取、添加、删除、设置、绑定、显示隐藏、回调、动画)

1.获取内容: text():获取文本内容.text获取的是文本内容,假设被指定的<div>里面还有各种标签,text也只获取里面的纯文本内容. html():获取括号内内容.而html则是获取里面的全部内容,包括标签也会一起打印出来. [例] $(“#d1”).text(“aaaaa”); //打印出 aaaaa $(“#d1”).html(“<div>aaaa</div>”); //打印出<div>aaaa</div> 2.添加元素: $(A

Html5学习笔记1 元素 标签 属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<

第六十节,文本元素标签

文本元素标签 <b></b>表示关键字和产品名称如:<b>查看效果</b> 效果:加粗 查看效果 <strong></strong>表示重要的文字 如:<strong>查看效果</strong> 效果:加粗 查看效果 <br>强制换行如:<br>查看<br>效果效果:在浏览器显示换行 查看效果  <wbr>安全换行,一般只用于英文如:<wbr>查看&l

HTML 5的革新之一:语义化标签一节元素标签。

摘至于:<HTML 5的革新——语义化标签(一)> 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分.但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”. 看下图没有用div标签来布局 html5的布局 嗯,如上图那个页面结构没有一个div,都是采用html5语义标签(用哪些标签,关键取决于你的设计

WordPress wp_head()优化:去除不必要的元素标签(转)

最近笔者在采用wordpress建站的时候,发现页面会生成很多冗余的代码,有些东西其实我们用不到,而且没什么很大的作用,这些代码我找了半天也没找到源代码怎么删除,最终发现是wp_head() 这个方法输出的代码,那么要如何删除这些不必要的头部信息呢. 文章来自http://www.life134.com 去除wordpress头部不必要的元素标签 文章来自http://www.life134.com 完整的wordpress头部清理代码 <?php //remove_action( ‘wp_he

html行内元素标签

元素分类--内联元素 在html中,<span>.<a>.<label>. <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素.当然块状元素也可以通过代码display:inline将元素设置为内联元素.如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点. div{ display:inline; } ...... <div>我要变成内联元素</div> 内联元素特

jq效果 点击隐藏和显示(组织冒泡事件)

一个button按钮,当我点击button后弹出DIV层, 当我点击DIV层以外的地方时候把DIV隐藏 大概代码如下: <input type="button" id="js_button" /> <div id="js_div" style="width: 100px; height: 100px; display: none"> </div> <script type="