html还点击显示js,js简单实现 点击之后显示全部效果介绍

在很多文章页面，可能文章比较多，在一半之后，会有个按钮之类"点击阅读全部/查看更多/阅读剩余内容"，点击之后就会显示所有隐藏的内容，在之前，鹏仔一直没写过写个效果，刚好今天开发项目遇到了，就给大家简单讲解下此效果的一个小方法，方法可能不是最简单的，大家自己了解即可。

首先 css代码

.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;

}

在css代码中，我给content的盒子设置了超出部分隐藏，这样在下面js中让大盒子的高度为500px之后，超出的部分就会隐藏，再就是给reading按钮简单写了一个样式，样式自行修改；

然后在写了一个 show 的class名，给了样式让隐藏，在下面的js中做判断，当大盒子高度大于500时候，给她删除class名，也就是默认显示；

其次 HTML 代码

这是一个内容，我是一个很多的内容，但我只单纯设置一个高度用来代替很多内容

阅读所有内容

在body的代码中，content的盒子是内容盒子，我给他直接设置了高度为1000；

再接着后面写了一个盒子是点击按钮；

下面 JS 代码

//获取大盒子

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');

}

js代码中，我们首先获取了大盒子，点击按钮的盒子和点击按钮，还有获取了大盒子的高度，接着我们在进行判断，当大盒子的高度(内容)大于500时候，让大盒子的高度就为500(之前设置了超出部分隐藏，那么多余的将会隐藏不可见)，让点击按钮的大盒子删除掉show的clss名，那么他默认就会显示，否则，大盒子还是加上show的class名，还是隐藏不可见；

接着就是当点击按钮时候，让大盒子的高度在为100%，超出部分隐藏不可见就不管用了，那么多余的文章就会显示出来，在接着让点击按钮的大盒子加上show的class名，那么他又会隐藏。

好了，这么一个小效果鹏仔就讲到这里了，方法有很多，有什么好的思路可以下方留言哦！

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓