文章内容页点击“展开阅读全文”的实现代码

小杨不出山

已于 2024-07-03 10:55:05 修改

阅读量6

点赞数

文章标签： css html javascript

于 2024-07-03 10:53:31 首次发布

原文链接：https://www.lanrenzhijia.com/jquery/5861.html

版权

文章内容页点击“展开阅读全文”的实现代码

1.CSS代码

.article_content {
	margin-bottom: 30px;
	color: #454545;
	padding: 20px 30px 0 30px;
	line-height: 40px;
}

.readall_box {
	position: relative;
	z-index: 9999;
	padding: 0 0 25px;
	margin-top: -200px;
	text-align: center;
}

.readall_box .read_more_mask {
	height: 200px;
	background: -moz-linear-gradient(bottom,rgba(255,255,255,0.1),rgba(255,255,255,0));
	background: -webkit-gradient(linear,0 top,0 bottom,from(rgba(255,255,255,0)),to(#fff));
	background: -o-linear-gradient(bottom,rgba(255,255,255,0.1),rgba(255,255,255,0))
}

.read_more_btn {
	cursor: pointer;
	font-size: 16px;
	color: #de686d;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #de686d;
	line-height: 30px;
	padding: 5px 10px;
}

2. html代码

<div class="container">
            <h2>Jquery阅读全文</h2>
            <div class="article_content">
                <div>内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容</div>
            </div>
            <div class="readall_box">
                <div class="read_more_mask"></div>
                <a class="read_more_btn" target="_self">阅读全文</a>
            </div>
        </div>

3. js代码

 //内容展示高度
 var widHeight = 300;
$(function(){
	showHideContent(false);
    //阅读全文
	$(document).on("click", ".read_more_btn", function () {
	    $('#article_content').height("").css({ 'overflow': 'hidden' });
	    $('.readall_box').hide()
	});
})
 //阅读全文使用
function showHideContent(isBo) {
    if (isBo) {
        //这里是不做高度判断，直接全展示
         $('.readall_box').hide();
    } else {
        var contentId$ = $("#article_content");
        var artHeight = contentId$.height();
        if (artHeight > widHeight) {
            contentId$.height(widHeight - 100).css({ 'overflow': 'hidden' });
        } else {
            $('.readall_box"]').hide();
        }
    }
}