87,907
社区成员
发帖
与我相关
我的任务
分享smzdm.com、tese.taobao.com中，文章列表里的“展开全文”是如何实现的
网站“什么值得买”、“淘宝特色”中，文章列表里的“展开全文”是如何实现的？感觉不是一般的“展开”、“隐藏”啊！求高手解惑~~~
...全文
请发表友善的回复…
发表回复
李睿_Lee 2014-05-06
- 打赏
- 举报
不是这样的 它不是简单的隐藏显示[/quote]
其它的没看，“什么值得买”的就是简单的隐藏显示。
vaivxuanzi 2014-05-05
- 打赏
- 举报
不是这样的 它不是简单的隐藏显示
vaivxuanzi 2014-05-05
- 打赏
- 举报
不是这样的 它不是简单的隐藏显示
itzgs 2014-05-05
- 打赏
- 举报
学习了
vincentguo_ 2014-05-05
- 打赏
- 举报
没看代码，用的 toggle（）么？
可以看看这个帖子
http://bbs.csdn.net/topics/390766269
李睿_Lee 2014-02-23
- 打赏
- 举报
补充下，刚刚没注意，看错了，点击展开不是把简介隐藏了，是把按钮给隐藏了，把隐藏的详细内容给显示了。
李睿_Lee 2014-02-23
- 打赏
- 举报
我看了smzdm里的，他是一开始详细内容隐藏了，只显示简介，点击展开的时候就把简介隐藏了，显示详细内容。
zhjdg 2014-02-23
- 打赏
- 举报
<!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>
人生难得一只鸡 2014-02-23
- 打赏
- 举报
你可以通过样式的添加与删除实现类似的效果，也就是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>
