使用 jQuer与 JS 写遮罩层 、展开与收起

开发工具与关键技术：Adobe Dreamweaver CC 2017 jQuery与JS的使用
作者：孙水兵
撰写时间：2019年1月25

上次用jQuery写了一个tab选项卡，关于jQuery我就不再多说。
遮罩层
HTML代码部分
写一个按钮用来控制遮罩层的显示与隐藏，最外面一个div用来覆盖浏览器显示页面，再用一个div包裹要显示的内容，并在其右上角设置关闭按钮，再用一个div设置要显示的内容。

<button class="btn btn-primary m-5" id="zhe">遮罩层</button>
<div class="zhe-yjfk" id="zhe-yjfk">
   <div class="zhe-yjfkbox">
   	<h3 class="title text-center">
   			- 意见反馈 -
   		</h3>
   	<form action="">
   		<select name="" id="" class="input-lg text-muted mt-2 mb-3">
   			<option value="">请选择问题类型</option>
   			<option value="">商品质量（手机、平板等软、硬件质量）</option>
   			<option value="">商品缺货</option>
   			<option value="">物流发货（发货慢、发错货、送件人态度等 </option>
   			<option value="">售后服务（服务网点、维修、退换货、客服）</option>
   			<option value="">网站问题（商城功能失效、不好用等）</option>
   			<option value="">其他问题</option>
   		</select>
   		<h5>您的问题与建议</h5>
   		<textarea name="" id="" cols="65" rows="4" class="my-3" 
   		placeholder="感谢您的宝贵建议，我们将不断改进"></textarea>
   		<h5>您的联系方式</h5>
   		<p><input type="text" placeholder="选填邮箱或商城账户" class="input-lg my-2"></p>
   		<input type="text">
   		<span>验证码</span>
   		<a href="#" class="huan">换一张</a>
   		<button type="button" class="btn btn-danger tijiao">提交</button>
   	</form>
   	<div class="colse-fix" id="colse-fix">
   	     <img src="img/close.gif" alt="">
   	</div>
   </div>
</div>

CSS部分
给最外面一个div设置宽度与高度100%，给其固定定位，半透明的背景，设置隐藏（display：none；写完所有css代码的HTML代码后写），第二个div给其一个相对定位。

.zhe-yjfk{
   height: 100%;
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background: rgba(0,0,0,0.2);
   display: none;
}
.zhe-yjfkbox{
   width: 540px;
   padding:30px 30px;
   background: #fff;
   position: relative;
   top:17%;
   left: 32%;
}
.input-lg{
   width: 100%;
   height: 32px;
}
.zhe-yjfkbox .tijiao{
   width: 120px;
   height: 30px;
   line-height: 16px;
   margin-left: 51px;
}
.zhe-yjfkbox .huan{
   width: 41px;
   text-align: center;
   font-size: 11px;
   text-decoration: none;
   color: blue;
   display: inline-block;
}
.colse-fix{
   position: absolute;
   top: 20px;
   right: 15px;
}

用jQuery写
通过id获取遮罩层按钮并给其一个点击事件，用来控制遮罩层的显示，通过id获取关闭按钮并给其一个点击事件，用来控制遮罩层的隐藏。

$(function() {
   	$("#zhe").click(function(){
   		$("#zhe-yjfk").show();
   	});
   	$("#colse-fix").click(function(){
   		$("#zhe-yjfk").hide();
   	});
   });

用JS写
通过id获取遮罩层最外层div、关闭按钮，遮罩层按钮并声明其变量，通过变量给遮罩层按钮一个点击事件，用来控制遮罩层的显示，通过变量获取关闭按钮并给其一个点击事件，用来控制遮罩层的隐藏。

var zheyjfk = document.getElementById("zhe-yjfk");
   var colsefix = document.getElementById("colse-fix");
   var zhe = document.getElementById("zhe");
   
   zhe.onclick = function(){
   	zheyjfk.style.display = "block";
   };
   colsefix.onclick = function(){
   	zheyjfk.style.display = "none";
   };

展开与收起
HTML部分
首先，用一个大的div包裹要写的内容，其显示的文字内容用span标签包裹，在这个div的下面再写一个同级的div，用来包裹展开与收起按钮。（ 为空格符号·）

<div class="box" align="left" id="box">
   <span>手机-商品筛选</span>
   <span>网络：移动4G（TD-LTE）联通4G（TD-LTE）联通3G（WCDMA）</span>
   <span>价格：5000以上&nbsp;4000-4999&nbsp;3000-3999&nbsp;2000-2999</span>
   <span>特点：JDPhone计划“0”元购机&nbsp;防水&nbsp;长待机&nbsp;1080P全高清屏</span>
   <span>价格：5000以上&nbsp;4000-4999&nbsp;3000-3999&nbsp;2000-2999</span>
   <span>价格：5000以上&nbsp;4000-4999&nbsp;3000-3999&nbsp;2000-2999</span>
</div>
<div class="button">
   <p class="zk" id="zk">展开</p>
   <p class="sq" id="sq">收起</p>
</div>

CSS部分
给span标签设置一个固定的宽度，并使其为块级元素（display：block;），给最外层div一个阴影效果，设置超出部分隐藏，最后给展开收起写样式（展开收起按钮样式类似，不过需要给收起按钮设置隐藏（display：none;）。

.box span{
   width: 676px; display: block;
   padding-left: 25px;
   padding-top: 30px;
   font-size: 20px;
}
.box span:nth-child(6){
   padding-bottom: 15px;
}
.box{
   width: 676px;
   background: #e5e5e5;
   box-shadow: 0 5px 5px #5b5b5b;
   margin: auto;
   height: 120px;
   overflow:hidden; 
}

.zk{
   width: 120px;
   height: 52px;
   background: #666666;
   text-align: center;
   line-height: 52px;
   font-size: 24px;
   color: white;
   margin-left: 47%;
   margin-top: 0%;
   cursor: pointer;
}
.sq{
   width: 120px;
   height: 52px;
   background: #666666;
   text-align: center;
   line-height: 52px;
   font-size: 24px;
   color: white;
   margin-left: 47%;
   cursor: pointer;
   margin-top: 0%;
   display: none;
}

用jQuery写
用id获取展开按钮并给其设置点击事件，在点击事件中获取最外层div并设置其高度（全部展开的高度），设置展开按钮隐藏，显示收起按钮。同样，用id获取收起按钮并给其设置点击事件，在点击事件中获取最外层div并设置其高度（收起时的高度），设置展开按钮显示，隐藏收起按钮。

 $(function(){
	$("#zk").click(function(){
		$("#box").height(360);
		$("#zk").hide();
		$("#sq").show();
	});
	$("#sq").click(function(){
		$("#box").height(120);
		$("#zk").show();
		$("#sq").hide();
	});
});

用JS写
通过id获取展开按钮、收起按钮还有包裹内容的盒子并声明其变量，给展开按钮设置点击事件，在点击事件中获取最外层div并设置其高度（全部展开的高度），设置展开按钮隐藏，显示收起按钮。同样，给收起按钮设置·点击事件，在点击事件中获取最外层div并设置其高度（收起时的高度），设置展开按钮显示，隐藏收起按钮。

 window.onload = function(){
	var box = document.getElementById("box");
	var zk = document.getElementById("zk");
	var sq = document.getElementById("sq");
	
	zk.onclick = function(){
		box.style.height="360px";
		zk.style.display="none";
		sq.style.display="block";
	};
	sq.onclick = function(){
		box.style.height="120px";
		zk.style.display="block";
		sq.style.display="none";
	};
};