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

作者：鹏仔先生日期：2020-06-01 16:18:13浏览：2054分类：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名，那么他又会隐藏。

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