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

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


首先 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 评论

留下您的评论.