smzdm.com、tese.taobao.com中，文章列表里的“展开全文”是如何实现的

时间：2022-08-25 19:43:33
网站“什么值得买”、“淘宝特色”中，文章列表里的“展开全文”是如何实现的？感觉不是一般的“展开”、“隐藏”啊！求高手解惑~~~

9 个解决方案

#1

我看了smzdm里的，他是一开始详细内容隐藏了，只显示简介，点击展开的时候就把简介隐藏了，显示详细内容。

#2

补充下，刚刚没注意，看错了，点击展开不是把简介隐藏了，是把按钮给隐藏了，把隐藏的详细内容给显示了。

#3

你可以通过样式的添加与删除实现类似的效果，也就是overflow:hidde;来控制，也许你可能考虑如下的代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.warp {

	width: 300px;

	margin: 100px auto;

}

.box {

	font-size:14px;

	line-height:24px;

}

.limitInfo {

	height: 48px;

	overflow: hidden;

}

.op a{float:right;text-decoration:none;font-size:12px;}

</style>

<script>

window.onload=function()

{

	var oBox=document.getElementById('box');

	var oA=document.getElementById('a_show');

	oA.onclick=function()

	{

		if(hasClass(oBox,'limitInfo'))

		{

			this.innerHTML='收起全文';

			removeClass(oBox,'limitInfo');

		}

		else

		{

			this.innerHTML='展开全文';

			addClass(oBox,'limitInfo');

		}

	}

}

function hasClass(obj,className)

{

	var pattern=new RegExp('(^|\\s+?)'+className+'(\\s+?|$)');

	return pattern.test(obj.className);

}

function removeClass(obj,className)

{

	var pattern=new RegExp('(^|\\s+?)'+className+'(\\s+?|$)');

	obj.className=obj.className.replace(pattern,'$1');

}

function addClass(obj,className)

{


	if(!hasClass(obj,className))

		obj.className+=' '+className;

}

</script>

</head>

<body>

<div class="warp">

  <div class="box limitInfo" id="box"> 又可以给手机充电，又是电动剃须刀？对，您没看错！二合一便携式移动电源剃须刀，方便又省空间，简直是出差男士的福音！5800mAh超大容量，USB同时输出，不仅剃须，而且能给手机充电。甩掉手机没电、甩掉胡须满脸、甩掉杂乱无章，旅途完美伴侣，男士完美伙伴，聚合物移动电源剃须刀。 </div>

  <div class="op"> <a href="javascript:;" id="a_show">展开全文</a> </div>

</div>

</body>

</html>

#4

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<style>

.p_detail {

	height: 300px;

	background-color: #eee;

	display: none;

}


.perContentBox {

	width: 400px;

}


#fixed {

	position: fixed;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 30px;

	background-color: #1aa;

}


.closeDetails {

	display: none;

}


.showDetails {

	display: block;

}


.bb {

	height: 300px;

}

</style>


</head>

<body>

	<div id='fixed'></div>

	<div class='bb'></div>

	<div class="perContentBox" id="post1">

		<h3>11111DOVE 多芬 深层营润</h3>

		<p class="p_excerpt">不错的凑单品，也可单买多瓶。Dove多芬是联合利华旗下的知名品牌，这款多芬深层营润滋养美肌沐浴乳蕴含1/4滋润乳液，能够渗透肌肤，滋润柔滑。规格720ml。</p>

		<p class="p_detail"></p>

		<div class="PickUpDown">

			<span class="showDetails" onclick="$show(this,'post1')">展开全文</span> <span class="closeDetails" onclick="$hide(this,'post1')">向上收起</span>

		</div>

	</div>	

	<div class='bb'></div>

	<div class="perContentBox" id="post2">

		<h3>2222DOVE 多芬 深层营润</h3>

		<p class="p_excerpt">不错的凑单品，也可单买多瓶。Dove多芬是联合利华旗下的知名品牌，这款多芬深层营润滋养美肌沐浴乳蕴含1/4滋润乳液，能够渗透肌肤，滋润柔滑。规格720ml。</p>

		<p class="p_detail"></p>

		<div class="PickUpDown">

			<span class="showDetails" onclick="$show(this,'post2')">展开全文</span> <span class="closeDetails" onclick="$hide(this,'post2')">向上收起</span>

		</div>

		<div class='bb'></div>

		<div class='bb'></div>

		<script>

			!function(w) {

				function $(id) {

					return document.getElementById(id);

				}

				var org = {

					'post1' : parseInt($('post1').getBoundingClientRect().top),

					'post2' : parseInt($('post2').getBoundingClientRect().top)

				};

				w.$show = function(that, id) {

					var detail = that.parentElement.previousElementSibling;

					var close = that.nextElementSibling;

					detail.style.display = 'block';

					close.style.display = 'block';

					that.style.display = 'none';					

				}

				w.$hide = function(that, id) {

					var detail = that.parentElement.previousElementSibling;

					var show = that.previousElementSibling;

					detail.style.display = 'none';

					show.style.display = 'block';

					that.style.display = 'none';

					var pos = org[id];

					window.scroll(0, pos - 30);

				}

			}(window);

		</script>

</body>

</html>

#5

引用 3 楼 Return_false 的回复:
你可以通过样式的添加与删除实现类似的效果，也就是overflow:hidde;来控制，也许你可能考虑如下的代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.warp {

	width: 300px;

	margin: 100px auto;

}

.box {

	font-size:14px;

	line-height:24px;

}

.limitInfo {

	height: 48px;

	overflow: hidden;

}

.op a{float:right;text-decoration:none;font-size:12px;}

</style>

<script>

window.onload=function()

{

	var oBox=document.getElementById('box');

	var oA=document.getElementById('a_show');

	oA.onclick=function()

	{

		if(hasClass(oBox,'limitInfo'))

		{

			this.innerHTML='收起全文';

			removeClass(oBox,'limitInfo');

		}

		else

		{

			this.innerHTML='展开全文';

			addClass(oBox,'limitInfo');

		}

	}

}

function hasClass(obj,className)

{

	var pattern=new RegExp('(^|\\s+?)'+className+'(\\s+?|$)');

	return pattern.test(obj.className);

}

function removeClass(obj,className)

{

	var pattern=new RegExp('(^|\\s+?)'+className+'(\\s+?|$)');

	obj.className=obj.className.replace(pattern,'$1');

}

function addClass(obj,className)

{


	if(!hasClass(obj,className))

		obj.className+=' '+className;

}

</script>

</head>

<body>

<div class="warp">

  <div class="box limitInfo" id="box"> 又可以给手机充电，又是电动剃须刀？对，您没看错！二合一便携式移动电源剃须刀，方便又省空间，简直是出差男士的福音！5800mAh超大容量，USB同时输出，不仅剃须，而且能给手机充电。甩掉手机没电、甩掉胡须满脸、甩掉杂乱无章，旅途完美伴侣，男士完美伙伴，聚合物移动电源剃须刀。 </div>

  <div class="op"> <a href="javascript:;" id="a_show">展开全文</a> </div>

</div>

</body>

</html>

不是这样的 它不是简单的隐藏显示

#6

引用 4 楼 u011461314 的回复: 
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<style>

.p_detail {

	height: 300px;

	background-color: #eee;

	display: none;

}


.perContentBox {

	width: 400px;

}


#fixed {

	position: fixed;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 30px;

	background-color: #1aa;

}


.closeDetails {

	display: none;

}


.showDetails {

	display: block;

}


.bb {

	height: 300px;

}

</style>


</head>

<body>

	<div id='fixed'></div>

	<div class='bb'></div>

	<div class="perContentBox" id="post1">

		<h3>11111DOVE 多芬 深层营润</h3>

		<p class="p_excerpt">不错的凑单品，也可单买多瓶。Dove多芬是联合利华旗下的知名品牌，这款多芬深层营润滋养美肌沐浴乳蕴含1/4滋润乳液，能够渗透肌肤，滋润柔滑。规格720ml。</p>

		<p class="p_detail"></p>

		<div class="PickUpDown">

			<span class="showDetails" onclick="$show(this,'post1')">展开全文</span> <span class="closeDetails" onclick="$hide(this,'post1')">向上收起</span>

		</div>

	</div>	

	<div class='bb'></div>

	<div class="perContentBox" id="post2">

		<h3>2222DOVE 多芬 深层营润</h3>

		<p class="p_excerpt">不错的凑单品，也可单买多瓶。Dove多芬是联合利华旗下的知名品牌，这款多芬深层营润滋养美肌沐浴乳蕴含1/4滋润乳液，能够渗透肌肤，滋润柔滑。规格720ml。</p>

		<p class="p_detail"></p>

		<div class="PickUpDown">

			<span class="showDetails" onclick="$show(this,'post2')">展开全文</span> <span class="closeDetails" onclick="$hide(this,'post2')">向上收起</span>

		</div>

		<div class='bb'></div>

		<div class='bb'></div>

		<script>

			!function(w) {

				function $(id) {

					return document.getElementById(id);

				}

				var org = {

					'post1' : parseInt($('post1').getBoundingClientRect().top),

					'post2' : parseInt($('post2').getBoundingClientRect().top)

				};

				w.$show = function(that, id) {

					var detail = that.parentElement.previousElementSibling;

					var close = that.nextElementSibling;

					detail.style.display = 'block';

					close.style.display = 'block';

					that.style.display = 'none';					

				}

				w.$hide = function(that, id) {

					var detail = that.parentElement.previousElementSibling;

					var show = that.previousElementSibling;

					detail.style.display = 'none';

					show.style.display = 'block';

					that.style.display = 'none';

					var pos = org[id];

					window.scroll(0, pos - 30);

				}

			}(window);

		</script>

</body>

</html>

不是这样的 它不是简单的隐藏显示

#7

没看代码，用的 toggle（）么？
可以看看这个帖子
http://bbs.csdn.net/topics/390766269

#8

学习了 smzdm.com、tese.taobao.com中，文章列表里的“展开全文”是如何实现的

#9

引用 6 楼 vaivxuanzi 的回复:
Quote: 引用 4 楼 u011461314 的回复: 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<style>

.p_detail {

	height: 300px;

	background-color: #eee;

	display: none;

}


.perContentBox {

	width: 400px;

}


#fixed {

	position: fixed;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 30px;

	background-color: #1aa;

}


.closeDetails {

	display: none;

}


.showDetails {

	display: block;

}


.bb {

	height: 300px;

}

</style>


</head>

<body>

	<div id='fixed'></div>

	<div class='bb'></div>

	<div class="perContentBox" id="post1">

		<h3>11111DOVE 多芬 深层营润</h3>

		<p class="p_excerpt">不错的凑单品，也可单买多瓶。Dove多芬是联合利华旗下的知名品牌，这款多芬深层营润滋养美肌沐浴乳蕴含1/4滋润乳液，能够渗透肌肤，滋润柔滑。规格720ml。</p>

		<p class="p_detail"></p>

		<div class="PickUpDown">

			<span class="showDetails" onclick="$show(this,'post1')">展开全文</span> <span class="closeDetails" onclick="$hide(this,'post1')">向上收起</span>

		</div>

	</div>	

	<div class='bb'></div>

	<div class="perContentBox" id="post2">

		<h3>2222DOVE 多芬 深层营润</h3>

		<p class="p_excerpt">不错的凑单品，也可单买多瓶。Dove多芬是联合利华旗下的知名品牌，这款多芬深层营润滋养美肌沐浴乳蕴含1/4滋润乳液，能够渗透肌肤，滋润柔滑。规格720ml。</p>

		<p class="p_detail"></p>

		<div class="PickUpDown">

			<span class="showDetails" onclick="$show(this,'post2')">展开全文</span> <span class="closeDetails" onclick="$hide(this,'post2')">向上收起</span>

		</div>

		<div class='bb'></div>

		<div class='bb'></div>

		<script>

			!function(w) {

				function $(id) {

					return document.getElementById(id);

				}

				var org = {

					'post1' : parseInt($('post1').getBoundingClientRect().top),

					'post2' : parseInt($('post2').getBoundingClientRect().top)

				};

				w.$show = function(that, id) {

					var detail = that.parentElement.previousElementSibling;

					var close = that.nextElementSibling;

					detail.style.display = 'block';

					close.style.display = 'block';

					that.style.display = 'none';					

				}

				w.$hide = function(that, id) {

					var detail = that.parentElement.previousElementSibling;

					var show = that.previousElementSibling;

					detail.style.display = 'none';

					show.style.display = 'block';

					that.style.display = 'none';

					var pos = org[id];

					window.scroll(0, pos - 30);

				}

			}(window);

		</script>

</body>

</html>

不是这样的 它不是简单的隐藏显示

其它的没看，“什么值得买”的就是简单的隐藏显示。

#1

我看了smzdm里的，他是一开始详细内容隐藏了，只显示简介，点击展开的时候就把简介隐藏了，显示详细内容。

#2

补充下，刚刚没注意，看错了，点击展开不是把简介隐藏了，是把按钮给隐藏了，把隐藏的详细内容给显示了。

#3

你可以通过样式的添加与删除实现类似的效果，也就是overflow:hidde;来控制，也许你可能考虑如下的代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.warp {

	width: 300px;

	margin: 100px auto;

}

.box {

	font-size:14px;

	line-height:24px;

}

.limitInfo {

	height: 48px;

	overflow: hidden;

}

.op a{float:right;text-decoration:none;font-size:12px;}

</style>

<script>

window.onload=function()

{

	var oBox=document.getElementById('box');

	var oA=document.getElementById('a_show');

	oA.onclick=function()

	{

		if(hasClass(oBox,'limitInfo'))

		{

			this.innerHTML='收起全文';

			removeClass(oBox,'limitInfo');

		}

		else

		{

			this.innerHTML='展开全文';

			addClass(oBox,'limitInfo');

		}

	}

}

function hasClass(obj,className)

{

	var pattern=new RegExp('(^|\\s+?)'+className+'(\\s+?|$)');

	return pattern.test(obj.className);

}

function removeClass(obj,className)

{

	var pattern=new RegExp('(^|\\s+?)'+className+'(\\s+?|$)');

	obj.className=obj.className.replace(pattern,'$1');

}

function addClass(obj,className)

{


	if(!hasClass(obj,className))

		obj.className+=' '+className;

}

</script>

</head>

<body>

<div class="warp">

  <div class="box limitInfo" id="box"> 又可以给手机充电，又是电动剃须刀？对，您没看错！二合一便携式移动电源剃须刀，方便又省空间，简直是出差男士的福音！5800mAh超大容量，USB同时输出，不仅剃须，而且能给手机充电。甩掉手机没电、甩掉胡须满脸、甩掉杂乱无章，旅途完美伴侣，男士完美伙伴，聚合物移动电源剃须刀。 </div>

  <div class="op"> <a href="javascript:;" id="a_show">展开全文</a> </div>

</div>

</body>

</html>

#4

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<style>

.p_detail {

	height: 300px;

	background-color: #eee;

	display: none;

}


.perContentBox {

	width: 400px;

}


#fixed {

	position: fixed;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 30px;

	background-color: #1aa;

}


.closeDetails {

	display: none;

}


.showDetails {

	display: block;

}


.bb {

	height: 300px;

}

</style>


</head>

<body>

	<div id='fixed'></div>

	<div class='bb'></div>

	<div class="perContentBox" id="post1">

		<h3>11111DOVE 多芬 深层营润</h3>

		<p class="p_excerpt">不错的凑单品，也可单买多瓶。Dove多芬是联合利华旗下的知名品牌，这款多芬深层营润滋养美肌沐浴乳蕴含1/4滋润乳液，能够渗透肌肤，滋润柔滑。规格720ml。</p>

		<p class="p_detail"></p>

		<div class="PickUpDown">

			<span class="showDetails" onclick="$show(this,'post1')">展开全文</span> <span class="closeDetails" onclick="$hide(this,'post1')">向上收起</span>

		</div>

	</div>	

	<div class='bb'></div>

	<div class="perContentBox" id="post2">

		<h3>2222DOVE 多芬 深层营润</h3>

		<p class="p_excerpt">不错的凑单品，也可单买多瓶。Dove多芬是联合利华旗下的知名品牌，这款多芬深层营润滋养美肌沐浴乳蕴含1/4滋润乳液，能够渗透肌肤，滋润柔滑。规格720ml。</p>

		<p class="p_detail"></p>

		<div class="PickUpDown">

			<span class="showDetails" onclick="$show(this,'post2')">展开全文</span> <span class="closeDetails" onclick="$hide(this,'post2')">向上收起</span>

		</div>

		<div class='bb'></div>

		<div class='bb'></div>

		<script>

			!function(w) {

				function $(id) {

					return document.getElementById(id);

				}

				var org = {

					'post1' : parseInt($('post1').getBoundingClientRect().top),

					'post2' : parseInt($('post2').getBoundingClientRect().top)

				};

				w.$show = function(that, id) {

					var detail = that.parentElement.previousElementSibling;

					var close = that.nextElementSibling;

					detail.style.display = 'block';

					close.style.display = 'block';

					that.style.display = 'none';					

				}

				w.$hide = function(that, id) {

					var detail = that.parentElement.previousElementSibling;

					var show = that.previousElementSibling;

					detail.style.display = 'none';

					show.style.display = 'block';

					that.style.display = 'none';

					var pos = org[id];

					window.scroll(0, pos - 30);

				}

			}(window);

		</script>

</body>

</html>

#5

引用 3 楼 Return_false 的回复:
你可以通过样式的添加与删除实现类似的效果，也就是overflow:hidde;来控制，也许你可能考虑如下的代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.warp {

	width: 300px;

	margin: 100px auto;

}

.box {

	font-size:14px;

	line-height:24px;

}

.limitInfo {

	height: 48px;

	overflow: hidden;

}

.op a{float:right;text-decoration:none;font-size:12px;}

</style>

<script>

window.onload=function()

{

	var oBox=document.getElementById('box');

	var oA=document.getElementById('a_show');

	oA.onclick=function()

	{

		if(hasClass(oBox,'limitInfo'))

		{

			this.innerHTML='收起全文';

			removeClass(oBox,'limitInfo');

		}

		else

		{

			this.innerHTML='展开全文';

			addClass(oBox,'limitInfo');

		}

	}

}

function hasClass(obj,className)

{

	var pattern=new RegExp('(^|\\s+?)'+className+'(\\s+?|$)');

	return pattern.test(obj.className);

}

function removeClass(obj,className)

{

	var pattern=new RegExp('(^|\\s+?)'+className+'(\\s+?|$)');

	obj.className=obj.className.replace(pattern,'$1');

}

function addClass(obj,className)

{


	if(!hasClass(obj,className))

		obj.className+=' '+className;

}

</script>

</head>

<body>

<div class="warp">

  <div class="box limitInfo" id="box"> 又可以给手机充电，又是电动剃须刀？对，您没看错！二合一便携式移动电源剃须刀，方便又省空间，简直是出差男士的福音！5800mAh超大容量，USB同时输出，不仅剃须，而且能给手机充电。甩掉手机没电、甩掉胡须满脸、甩掉杂乱无章，旅途完美伴侣，男士完美伙伴，聚合物移动电源剃须刀。 </div>

  <div class="op"> <a href="javascript:;" id="a_show">展开全文</a> </div>

</div>

</body>

</html>

不是这样的 它不是简单的隐藏显示

#6

引用 4 楼 u011461314 的回复: 
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<style>

.p_detail {

	height: 300px;

	background-color: #eee;

	display: none;

}


.perContentBox {

	width: 400px;

}


#fixed {

	position: fixed;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 30px;

	background-color: #1aa;

}


.closeDetails {

	display: none;

}


.showDetails {

	display: block;

}


.bb {

	height: 300px;

}

</style>


</head>

<body>

	<div id='fixed'></div>

	<div class='bb'></div>

	<div class="perContentBox" id="post1">

		<h3>11111DOVE 多芬 深层营润</h3>

		<p class="p_excerpt">不错的凑单品，也可单买多瓶。Dove多芬是联合利华旗下的知名品牌，这款多芬深层营润滋养美肌沐浴乳蕴含1/4滋润乳液，能够渗透肌肤，滋润柔滑。规格720ml。</p>

		<p class="p_detail"></p>

		<div class="PickUpDown">

			<span class="showDetails" onclick="$show(this,'post1')">展开全文</span> <span class="closeDetails" onclick="$hide(this,'post1')">向上收起</span>

		</div>

	</div>	

	<div class='bb'></div>

	<div class="perContentBox" id="post2">

		<h3>2222DOVE 多芬 深层营润</h3>

		<p class="p_excerpt">不错的凑单品，也可单买多瓶。Dove多芬是联合利华旗下的知名品牌，这款多芬深层营润滋养美肌沐浴乳蕴含1/4滋润乳液，能够渗透肌肤，滋润柔滑。规格720ml。</p>

		<p class="p_detail"></p>

		<div class="PickUpDown">

			<span class="showDetails" onclick="$show(this,'post2')">展开全文</span> <span class="closeDetails" onclick="$hide(this,'post2')">向上收起</span>

		</div>

		<div class='bb'></div>

		<div class='bb'></div>

		<script>

			!function(w) {

				function $(id) {

					return document.getElementById(id);

				}

				var org = {

					'post1' : parseInt($('post1').getBoundingClientRect().top),

					'post2' : parseInt($('post2').getBoundingClientRect().top)

				};

				w.$show = function(that, id) {

					var detail = that.parentElement.previousElementSibling;

					var close = that.nextElementSibling;

					detail.style.display = 'block';

					close.style.display = 'block';

					that.style.display = 'none';					

				}

				w.$hide = function(that, id) {

					var detail = that.parentElement.previousElementSibling;

					var show = that.previousElementSibling;

					detail.style.display = 'none';

					show.style.display = 'block';

					that.style.display = 'none';

					var pos = org[id];

					window.scroll(0, pos - 30);

				}

			}(window);

		</script>

</body>

</html>

不是这样的 它不是简单的隐藏显示

#7

没看代码，用的 toggle（）么？
可以看看这个帖子
http://bbs.csdn.net/topics/390766269

#8

学习了 smzdm.com、tese.taobao.com中，文章列表里的“展开全文”是如何实现的

#9

引用 6 楼 vaivxuanzi 的回复:
Quote: 引用 4 楼 u011461314 的回复: 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<style>

.p_detail {

	height: 300px;

	background-color: #eee;

	display: none;

}


.perContentBox {

	width: 400px;

}


#fixed {

	position: fixed;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 30px;

	background-color: #1aa;

}


.closeDetails {

	display: none;

}


.showDetails {

	display: block;

}


.bb {

	height: 300px;

}

</style>


</head>

<body>

	<div id='fixed'></div>

	<div class='bb'></div>

	<div class="perContentBox" id="post1">

		<h3>11111DOVE 多芬 深层营润</h3>

		<p class="p_excerpt">不错的凑单品，也可单买多瓶。Dove多芬是联合利华旗下的知名品牌，这款多芬深层营润滋养美肌沐浴乳蕴含1/4滋润乳液，能够渗透肌肤，滋润柔滑。规格720ml。</p>

		<p class="p_detail"></p>

		<div class="PickUpDown">

			<span class="showDetails" onclick="$show(this,'post1')">展开全文</span> <span class="closeDetails" onclick="$hide(this,'post1')">向上收起</span>

		</div>

	</div>	

	<div class='bb'></div>

	<div class="perContentBox" id="post2">

		<h3>2222DOVE 多芬 深层营润</h3>

		<p class="p_excerpt">不错的凑单品，也可单买多瓶。Dove多芬是联合利华旗下的知名品牌，这款多芬深层营润滋养美肌沐浴乳蕴含1/4滋润乳液，能够渗透肌肤，滋润柔滑。规格720ml。</p>

		<p class="p_detail"></p>

		<div class="PickUpDown">

			<span class="showDetails" onclick="$show(this,'post2')">展开全文</span> <span class="closeDetails" onclick="$hide(this,'post2')">向上收起</span>

		</div>

		<div class='bb'></div>

		<div class='bb'></div>

		<script>

			!function(w) {

				function $(id) {

					return document.getElementById(id);

				}

				var org = {

					'post1' : parseInt($('post1').getBoundingClientRect().top),

					'post2' : parseInt($('post2').getBoundingClientRect().top)

				};

				w.$show = function(that, id) {

					var detail = that.parentElement.previousElementSibling;

					var close = that.nextElementSibling;

					detail.style.display = 'block';

					close.style.display = 'block';

					that.style.display = 'none';					

				}

				w.$hide = function(that, id) {

					var detail = that.parentElement.previousElementSibling;

					var show = that.previousElementSibling;

					detail.style.display = 'none';

					show.style.display = 'block';

					that.style.display = 'none';

					var pos = org[id];

					window.scroll(0, pos - 30);

				}

			}(window);

		</script>

</body>

</html>

不是这样的 它不是简单的隐藏显示

其它的没看，“什么值得买”的就是简单的隐藏显示。
标签：

相关文章