javascript - 展开一个 div 以在点击时显示溢出

Question

我正在 this website 上查看这个示例.我想创建一个类似的效果，其中有一个

，里面有一些

，还有一个按钮可以显示完整的展开描述。我分析了 html，它看起来像这样:

<div class="product-description">
   <div class="desc-wrap" itemprop="description">
      <p>Material: wool
         <br>6 Colors: Black, Yellow, Gray, Wine Red, Green, Navy Blue
         <br>Size: One size only
         <br>Recommended for size SMALL
         <br>It has been noted by customers that these skirts are short.
         <br>*Please check the measurement picture for sizing information. There are no refunds on orders that were messed up on your behalf.
      </p>
      <p>Note: Due to the difference between different monitors, the color may be off a tiny bit.</p>
      <p>WORLDWIDE SHIPPING!
      </p>
   </div>
   <div class="desc-fade"></div>
   <div class="open-link" style="display: block;"><a href="javascript:;">Expand Full Description</a></div>
</div>

我假设有一个 javascript 函数可以在点击时展开框。但那是什么？如何重现同样的效果？

最佳答案

这是一个完全符合您要求的示例:http://jsfiddle.net/kedem/D9NCP/

CSS:

    .product-description {
        height:150px;
        overflow: hidden;
        position:relative;
    }
    .product-description.open {
        height:auto;
        overflow: hidden;
        position:relative;
    }
    .desc-fade {
        width: 200%;
        margin-left: -50%;
        height: 30px;
        background: #fff;
        z-index: 1;
        position: absolute;
        -webkit-box-shadow: 0 0 20px 30px #fff;
        -moz-box-shadow: 0 0 20px 30px #fff;
        box-shadow: 0 0 20px 30px #fff;
        bottom: 0;
        left: 0;
        opacity: 1;
        -webkit-transition: opacity 250ms, 1s;
        -moz-transition: opacity 250ms, 1s;
        -o-transition: opacity 250ms, 1s;
        transition: opacity 250ms, 1s;
    }
    .open-link {
        position:absolute;
        bottom: 15px;
        z-index:2;
    }

j查询:

     $(function () {
        var wrapHeight = $(".product-description .desc-wrap").height();
        var descHeight = $(".product-description").height();

        if (wrapHeight <= descHeight) {
            $(".product-description .desc-fade").hide();
            $(".product-description .open-link").hide();
        }

        $(".product-description .open-link").click(function () {
            $(this).hide();
            $(".product-description .desc-fade").hide();
            $(".product-description").animate({
                height: wrapHeight
            }, 1000);
        });
    });

关于javascript - 展开一个 div 以在点击时显示溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20255458/

Answer 1

这是一个完全符合您要求的示例:http://jsfiddle.net/kedem/D9NCP/

CSS:

    .product-description {
        height:150px;
        overflow: hidden;
        position:relative;
    }
    .product-description.open {
        height:auto;
        overflow: hidden;
        position:relative;
    }
    .desc-fade {
        width: 200%;
        margin-left: -50%;
        height: 30px;
        background: #fff;
        z-index: 1;
        position: absolute;
        -webkit-box-shadow: 0 0 20px 30px #fff;
        -moz-box-shadow: 0 0 20px 30px #fff;
        box-shadow: 0 0 20px 30px #fff;
        bottom: 0;
        left: 0;
        opacity: 1;
        -webkit-transition: opacity 250ms, 1s;
        -moz-transition: opacity 250ms, 1s;
        -o-transition: opacity 250ms, 1s;
        transition: opacity 250ms, 1s;
    }
    .open-link {
        position:absolute;
        bottom: 15px;
        z-index:2;
    }

j查询:

     $(function () {
        var wrapHeight = $(".product-description .desc-wrap").height();
        var descHeight = $(".product-description").height();

        if (wrapHeight <= descHeight) {
            $(".product-description .desc-fade").hide();
            $(".product-description .open-link").hide();
        }

        $(".product-description .open-link").click(function () {
            $(this).hide();
            $(".product-description .desc-fade").hide();
            $(".product-description").animate({
                height: wrapHeight
            }, 1000);
        });
    });