jq 元素标签刚开始显示一部分 点击展开全部 显示完全
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于jq 元素标签刚开始显示一部分 点击展开全部 显示完全的主要内容，如果未能解决你的问题，请参考以下文章
listview嵌套gridview，并实现grid元素部分显示以及点击展开与折叠