Javascript 展开div以在单击时显示溢出_Javascript_Jquery_Html_Css

Javascript 展开div以在单击时显示溢出

javascript jquery html css

Javascript 展开div以在单击时显示溢出,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在看这个例子。我想创造一个类似的效果，你有一个在里面有一些，有一个按钮来显示完整的扩展描述。我分析了html，结果如下： <div class="product-description"> <div class="desc-wrap" itemprop="description"> <p>Material: wool <br>6 Colors: Black, Yellow, Gray, Wine Red, G

我正在看这个例子。我想创造一个类似的效果，你有一个在里面有一些，有一个按钮来显示完整的扩展描述。我分析了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>


材料：羊毛

6种颜色：黑色、黄色、灰色、酒红色、绿色、海军蓝

尺码：一号

建议小尺寸使用

顾客注意到这些裙子很短。

*请查看测量图片了解尺寸信息。代表您处理的订单不退款。

注意：由于不同显示器之间的差异，颜色可能会有一点偏差
全球航运！

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

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

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

这对你有用吗？

HTML

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

让我知道它是否有用。

这个怎么样：

我所做的：

$('.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，但我会让你自己决定；）

下面是一个你想要的例子：

css:

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

$（函数（）{
var wrapHeight=$（“.product description.desc wrap”）.height（）；
var descHeight=$（“.product description”）.height（）；
如果（wrapHeight这里是完整的代码
<!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>


$（文档）.ready（函数（）{
变量$divView=$（'div.view'）；
var innerHeight=$divView.removeClass（'view'）.height（）；
$divView.addClass（'view'）；
$（'div.slide'）。单击（函数（）{
$（'div.view'）。设置动画({
高度：（$divView.height（）==110）？内部高度：“110px”）
}, 500);
返回false；
});
});
.视图{
溢出：隐藏；
高度：110px；
}
.总数{
边框：1px实心；
/*高度：130像素；
溢出y：自动*/
}
显示/隐藏取决于上面的切换
显示/隐藏取决于上面的切换
显示/隐藏取决于上面的切换
显示/隐藏取决于上面的切换
显示/隐藏取决于上面的切换
显示/隐藏取决于上面的切换
显示/隐藏取决于上面的切换
显示/隐藏取决于上面的切换
显示/隐藏取决于上面的切换
显示/隐藏
Hello在同一页上相邻的两个div如何执行此操作？Hello在同一页上相邻的两个div如何执行此操作？
.desc-wrap { height: 60px; overflow: hidden }

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

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

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