javascript - 阅读更多按钮，逐渐删除最大高度

Question

我有一个“阅读更多”按钮，它通过删除 css 属性 max-height 来增加 div 的高度，但我想要一个像jQuery slideToggle() 函数“下拉”div 的其余部分。

这是我的代码:

<div id="Presentation" style="text-align:justify;"><?php echo $data['texte_presentation'];?></div>
            <div id="fadeout" class="fadeout" style="display:none;"></div>
                <div id="DivReadMore" style="text-align:right;margin-top:-4em;display:none;">
                <hr style="margin:5px;"><button id="BoutonReadMore" class="btn btn-warning btn-block"><i class="fa fa-plus"></i> Lire la suite</button>
                </div>
            <script>
            $(document).ready(function () {
                ReadMore();
                $(window).on('resize', function(){
                    if($('#Presentation').hasClass("read-more"))
                    {}else{
                      ReadMore();
                    }
                });
                $("#BoutonReadMore").click(function(){
                  $("#Presentation").css({'max-height':'', 'overflow':''});
                  $("#DivReadMore").hide();
                  $("#fadeout").hide();
                  $("#Presentation").addClass("read-more");
                });
            });
            function ReadMore() {
                var hauteur = $('#Presentation').height();
                if(hauteur > 200)
                {
                    $("#Presentation").css({'max-height':'250px', 'overflow':'hidden'});
                    $("#fadeout").show();
                    $("#DivReadMore").show();

                }else{
                $("#Presentation").css({'max-height':'', 'overflow':''});
                    $("#fadeout").hide();
                    $("#DivReadMore").hide();
                }
            }
            </script>

你有想法吗？

Answer 1

将其放入 block 的 css 中:transition: ease 0.5s all;。可能它不起作用，因为 block 上缺少最大高度。

我喜欢做的一个技巧就是使用 jQuery.animate 极大地增加最大高度。这将创建动画 :)