前端网页内容实现展开/收起全文的操作（js+css控制高度实现）

在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容.使用jquery比较容易实现,控制div的高度展现。

思路是 , 获取当前html文本的div高度 ,超过一定高度就增加一个class值 . 它旁边的点击展开全文默认隐藏 , 超过高度展示 .展开全文点击后更换文字内容为收起全文

下面直接展示代码：

1、html的div文本内容比如是这样

 <div class="game_content">
        <div class="game_intro">
             内容......
         </div> 
    </div>

2、一段js代码实现控制展示的内容收起和展开效果，用jQuery实现

//展开，收起全文
        var conh = $('.game_content').height();
        var gmh = 300;
        if (conh > gmh) {
            $('.game_content').css('height', gmh + 'px');
            $('.game_content').after('<div class="intro_btn dd todown">展开全文 +</div>');
            $('.intro_btn').click(function () {
                if ($(this).hasClass('todown')) {
                    $('.game_content').css('height', 'auto');
                    $(this).removeClass('todown');
                    $(this).html('收起全文 -');
                } else {
                    $('.game_content').css('height', gmh + 'px');
                    $(this).addClass('todown');
                    $(this).html('展开全文 +');
                }
            });
        }

以上可以看到，判断文本div区域的高度，超过一定高度，比如300像素，就把文章收起，放一个div可以展开，反之亦然。把这段代码放到页面加载完成后的js函数里面即可.

这个应该是一个很简单的实现，希望可以帮到你，解决实际开发中的需求。

来源：