在很多文章页面，可能文章比较多，在一半之后，会有个按钮之类"点击阅读全部/查看更多/阅读剩余内容"，点击之后就会显示所有隐藏的内容，在之前，鹏仔一直没写过写个效果，刚好今天开发项目遇到了，就给大家简单讲解下此效果的一个小方法，方法可能不是最简单的，大家自己了解即可。
首先 css代码
<style>
.content{
overflow: hidden;
height: 1000px;
width: 100%;
}
.reading{
font-size: 0.12rem;
margin: 2pxauto;
line-height: 30px;
display: block;
width: 30px;
border-radius: 5px;
border: 1px solid #000;
text-align: center;
color: #000;
}
.show{
display: none;
}
</style>在css代码中，我给content的盒子设置了超出部分隐藏，这样在下面js中让大盒子的高度为500px之后，超出的部分就会隐藏，再就是给reading按钮简单写了一个样式，样式自行修改；
然后在写了一个 show 的class名，给了样式让隐藏，在下面的js中做判断，当大盒子高度大于500时候，给她删除class名，也就是默认显示；
其次 HTML 代码
<!--大盒子的内容-->
<div class="content" id="Content">这是一个内容，我是一个很多的内容，但我只单纯设置一个高度用来代替很多内容</div>
<!--点击按钮的盒子-->
<div class="show" id="All" style="background: #fff; padding: 3px;">
<!--点击按钮-->
<div id="reading" class="reading" style="background: #fff;">阅读所有内容</div>
</div>在body的代码中，content的盒子是内容盒子，我给他直接设置了高度为1000；
再接着后面写了一个盒子是点击按钮；
下面 JS 代码
<script>
//获取大盒子
let Content = document.getElementById('#Content');
// 获取点击按钮的盒子
let All = document.querySelector('#All');
//获取点击按钮
let reading = document.querySelector('#reading');
//获取大盒子的高度
let Content = window.getComputedStyle(Content)['height'];
//console打印下，看是否获取到
console.log(Content);
// 判断，用大盒子的高度比较，如果文章的内容页面高度大于500
if(Content > '500px'){
// 那么直接让大合租的高度为500
Content.style.height='500px';
// 并且点击按钮为显示状态，也就是让删除class名
All.classList.remove('show');
} else {
// 否则点击按钮盒子还是加上class隐藏掉
All.classList.add('show');
}
//当点击按钮时候，开始执行下面代码
reading.onclick = function (){
Content.style.height='100%';
All.classList.add('show');
}
</script>js代码中，我们首先获取了大盒子，点击按钮的盒子和点击按钮，还有获取了大盒子的高度，接着我们在进行判断，当大盒子的高度（内容）大于500时候，让大盒子的高度就为500（之前设置了超出部分隐藏，那么多余的将会隐藏不可见），让点击按钮的大盒子删除掉show的clss名，那么他默认就会显示，否则，大盒子还是加上show的class名，还是隐藏不可见；
接着就是当点击按钮时候，让大盒子的高度在为100%，超出部分隐藏不可见就不管用了，那么多余的文章就会显示出来，在接着让点击按钮的大盒子加上show的class名，那么他又会隐藏。
好了，这么一个小效果鹏仔就讲到这里了，方法有很多，有什么好的思路可以下方留言哦！
本文链接：https://my.lmcjl.com/post/21007.html
展开阅读全文
4 评论