擴展div以顯示點擊溢出

Question

我正在這個網站上看這個例子。 我想創建一個類似的效果，其中您的<div>中包含一些<p>，並且有一個按鈕來顯示完整的擴展說明。 我已經分析了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演示

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>