扩展div以显示单击时溢出

时间:2022-11-03 12:46:25

I am looking at this example on this website. I wanted to create an effect similar like that where you have a <div> that has some <p> in it and there's a button to show the full expanded description. I've analyzed the html and it looks like this:

我正在这个网站上看这个例子。我想创建一个类似的效果,其中有一个

,其中有一些

,还有一个按钮显示完整的扩展描述。我分析了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>

I assume that there's a javascript function that expands the box on click. But what is that? How do I reproduce this same effect?

我假设有一个javascript函数在单击时展开框。但那是什么呢?我如何复制同样的效果?

5 个解决方案

#1


1  

Here's an example for exectly what you wanted: http://jsfiddle.net/kedem/D9NCP/

这里有一个您想要的示例:http://jsfiddle.net/kedem/D9NCP/

css:

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:

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

#2


0  

Does this works for you? JSFIDDLE Demo

HTML

这对你有用吗?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

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

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

let me know if it's useful.

如果有用的话,请告诉我。

#3


0  

Using DOM inspector, it will help you understanding the trick. First they use a constant height for the container. Onclick remove the text and expand the div by setting a bigger height.

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

However, we have to determine the total height of the div so we shouldn't hide the expanded part from the start

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

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

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

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

#4


0  

How about this:

这个怎么样:

http://jsfiddle.net/VvBRh/

http://jsfiddle.net/VvBRh/

What I have done:

我都做了什么:

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

You will also need to add a little css to get inital settings:

您还需要添加一些css来获得inital设置:

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

I'm sure this could be more elegant, and you could derive the height of 2 lines instead of fixed px, but I'll leave that up to you to decide ;)

我相信这会更优雅,你可以推导出2行而不是固定的px的高度,但我留给你决定;)

#5


0  

Here is the complete code

这是完整的代码

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

#1


1  

Here's an example for exectly what you wanted: http://jsfiddle.net/kedem/D9NCP/

这里有一个您想要的示例:http://jsfiddle.net/kedem/D9NCP/

css:

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:

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

#2


0  

Does this works for you? JSFIDDLE Demo

HTML

这对你有用吗?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

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

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

let me know if it's useful.

如果有用的话,请告诉我。

#3


0  

Using DOM inspector, it will help you understanding the trick. First they use a constant height for the container. Onclick remove the text and expand the div by setting a bigger height.

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

However, we have to determine the total height of the div so we shouldn't hide the expanded part from the start

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

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

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

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

#4


0  

How about this:

这个怎么样:

http://jsfiddle.net/VvBRh/

http://jsfiddle.net/VvBRh/

What I have done:

我都做了什么:

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

You will also need to add a little css to get inital settings:

您还需要添加一些css来获得inital设置:

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

I'm sure this could be more elegant, and you could derive the height of 2 lines instead of fixed px, but I'll leave that up to you to decide ;)

我相信这会更优雅,你可以推导出2行而不是固定的px的高度,但我留给你决定;)

#5


0  

Here is the complete code

这是完整的代码

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