在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容.使用jquery比较容易实现,控制div的高度展现。
思路是 , 获取当前html文本的div高度 ,超过一定高度就增加一个class值 . 它旁边的点击展开全文默认隐藏 , 超过高度展示 .展开全文点击后更换文字内容为收起全文
下面直接展示代码：
1、html的div文本内容比如是这样
内容......
2、一段js代码实现控制展示的内容收起和展开效果，用jQuery实现
//展开，收起全文
var conh = $('.game_content').height();
var gmh = 300;
if (conh > gmh) {
$('.game_content').css('height', gmh + 'px');
$('.game_content').after('
展开全文 +');
$('.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函数里面即可.
这个应该是一个很简单的实现，希望可以帮到你，解决实际开发中的需求。
来源：萬仟网
