Question

我在this website上看这个例子。我想创建一个类似于你有一个＆lt; div＆gt;的效果。有一些＆lt; p＆gt;在它里面有一个按钮来显示完整的扩展描述。我已经分析了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函数可以在点击时展开框。但那是什么？我如何重现同样的效果？

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;
    }

jquery的：

     $(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);
        });
    });

Answer 2

使用DOM检查器，它将帮助您理解这个技巧。首先，它们对容器使用恒定高度。 Onclick删除文本并通过设置更大的高度来扩展div。

但是，我们必须确定div的总高度，所以我们不应该从一开始就隐藏扩展部分

http://jsfiddle.net/2SMF2/2/

$('.expand').click(function () {
     $('#test').removeClass('collapsed', 'fast')
     $(this).remove();
});

Answer 3

这对你有用吗？ JSFIDDLE Demo

HTML

<div class="div-wrapper">
    <div class="hider">
        <p>Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown </p>
    </div>
    <a href="javascript:void(0);" class="open-link">Show all</a>
</div>

CSS

/* this first one is not necesary */
.div-wrapper {
    width:300px;
    border:solid 1px #000;
}

.div-wrapper>.hider {
    height: 100px;
    transition: ease-in-out all 0.2s;
    overflow:hidden;
}

JQUERY

$(document).ready(function(e) {
    $('.open-link').click(function(e) {
       var $wrapper = $(this).parent().find('.hider');
       $wrapper.css('height',$wrapper.find('p').height());
       $(this).remove();
    })
});

让我知道它是否有用。

Answer 4

这个怎么样：

http://jsfiddle.net/VvBRh/

我做了什么：

$('.open-link a').click(function(){

     if($(".desc-wrap").css("height") == "60px") {

        //Find auto height of div and save it

        $('.desc-wrap').css('height', 'auto');
        var autoHeight = $('.desc-wrap').height();

        //Revert back to 2 lines

        $('.desc-wrap').css('height', '60px');

        //Animate to the saved autoHeight

        $(".desc-wrap").animate({height: autoHeight}, 1000);

    } else {

        //Shrink back to 2 lines (you can remove this if you want)

      $(".desc-wrap").animate({height: "60px"}, 1000);

    }
    return false;
});

您还需要添加一点css来获取初始设置：

.desc-wrap { height: 60px; overflow: hidden }

我确信这可能更优雅，你可以得到2行的高度而不是固定的px，但我会把它留给你决定;）

Answer 5

这是完整的代码

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
    var $divView = $('div.view');
    var innerHeight = $divView.removeClass('view').height();
    $divView.addClass('view');

    $('div.slide').click(function() {
        $('div.view').animate({
          height: (($divView.height() == 110)? innerHeight  : "110px")
        }, 500);
        return false;
    });
});

</script>
<style>
.view{
    overflow:hidden;
    height: 110px;

}
.total{
border:1px solid;
/*height:130px;
overflow-y:auto;*/
}
</style>
</head>
<body>
<div class="total">
<div class="view">
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
</div>
<div class="slide" style="cursor: pointer;">Show/Hide</div>
</div>
</body>
</html>

扩展div以显示点击溢出

5 个答案: