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

JS特效展开隐藏

解决方案 »

  1.   

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

  2.   

    你可以通过样式的添加与删除实现类似的效果，也就是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>
      

  3.   

    <!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>
      

  4.   

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