2024年04月06日 前端 JS JavaScript 共享博客
在很多文章页面,可能文章比较多,在一半之后,会有个按钮之类"点击阅读全部/查看更多/阅读剩余内容",点击之后就会显示所有隐藏的内容,在之前,鹏仔一直没写过写个效果,刚好今天开发项目遇到了,就给大家简单讲解下此效果的一个小方法,方法可能不是最简单的,大家自己了解即可。
首先 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名,那么他又会隐藏。
好了,这么一个小效果鹏仔就讲到这里了,方法有很多,有什么好的思路可以下方留言哦!
本文链接:http://so.lmcjl.com/news/1240/