js点击按钮右侧div显示隐藏

最新推荐文章于 2024-09-10 10:58:36 发布

Zh.冠军

最新推荐文章于 2024-09-10 10:58:36 发布

阅读量588

点赞数 1

分类专栏： jquery js

本文链接：https://blog.csdn.net/weixin_38673922/article/details/113528069

版权

js 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

代码块

		<style type="text/css">
			body{
				width: 100%;
				overflow: hidden;
			}
			/*PDF预览*/
			.PDFWrap{
				background: #B0E0E6;
				width:40%;
				height:100vh;
				overflow:hidden;
				position:absolute;
				right:-40%;
				border-left: 1px solid #f5f5f5;
				box-shadow: 3px 3px 5px 2px #e4e3e3;
				box-sizing:border-box;
			}
			div:nth-child(1){
				position: absolute;
			}
		</style>	
		<body>
			<div>
				<button onclick="openPDF()">打开</button>
				<button onclick="closePDF()">关闭</button>		
			</div>
			<div class="PDFWrap">内容显示</div>
		</body>	
		<script type="text/javascript">
	        //PDF侧边栏显示
	        function openPDF(){
	            $(".PDFWrap").animate({
	                right: '0'
	            });
	        }
	        //PDF侧边栏关闭
	        function closePDF(){
	            $(".PDFWrap").animate({
	                right: '-40%'
	            });
	        }			
		</script>