jQuery 文字超出高度后折叠
jQuery 文字超出高度后折叠
2021年03月27日 205 阅读
  • 首页
  • /
  • 笔记
  • /
  • 正文
  • 实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery 文字超出高度后折叠</title>
        <style>
            .container{
                margin: 0 auto;
                width: 500px;
                border: green 1px solid;
            }
            .content{
                position: relative;
                overflow: hidden;
                padding: 15px;
            }
            .more{
                text-align: right;
                padding: 15px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">
                我以为要是唱的用心良苦,你就会对我义无反顾,我真的不会对你再爱一次,请你别再为我留太多的泪。也许这是真的不应该说,下一次我会给你更好的告别。
            </div>
    
    <div class="more"></div>
    
    </div>
    
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function(){
            let zxHeight = 30;//最小高度
            let mrHeight = $('.content').height();//默认高度
            if (mrHeight >= mrHeight){
                $('.content').css('height',zxHeight + 'px');
                $('.more').append('<a href="#">展开</a>');
                $('.more a').click(function(){
                    let dqHeight = $('.content').height();//当前高度
                    if (dqHeight > zxHeight){
                        $('.content').animate({height:zxHeight},'normal');
                        $('.more a').text('展开');
                    } else {
                        $('.content').animate({height:mrHeight},'normal');
                        $('.more a').text('折叠');
                    }
                    return false;
                });
            }
        });
    </script>
    </html>

    效果

    more.gif

    1

    评论 (0)

    取消