欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQUery 动画——隐藏和显示

程序员文章站 2022-03-07 13:19:30
...

切换3个布局:根据formid 进行切换:

<div id = "doorInfo" class="panel panel-default doorinfo" style="display:none">
			  <div class="panel-heading">门信息</div>
			  <div class="panel-body">
			            
					      <div style="display:none" id="menu_item1">
                               <c:if test="${doorController.controllersn.substring(0,1)=='1' }"> 
							        <div class="fr_response_field col-sm-2"  >
									 	<div class="fr-form-group"> 
										 	<label class="fr-control-label">1号门</label>
										  	<div class="fr-form-block" data-type="fixed">
										  	    <input id ="doorsid11"  type="hidden" value="${doorController.doors.size()==1?doorController.doors.get(0).doorid:''}"/>
										        <input type="text"  title="1号门" class="fr-form-control door" id="doorsnames11" name="m:doorController:doorsnames" value="${doorController.doors.size()==1? doorController.doors.get(0).doorname:''}" validate="{required:false}"/>				
										 	</div>
									  	</div>
									</div>	
									<div class="fr_response_field col-sm-2"  >
									 	<div class="fr-form-group"> 
										 	<label class="fr-control-label">控制方式</label>
										  	<div class="fr-form-block dwh" data-type="fixed" >			
										        <div class="ic"><input type="radio"  name="ctrl11" value="3" ${doorController.doors.size()==1 and doorController.doors.get(0).doorcontrol eq '3' or doorController.doors.size()==0? 'checked=true':''}>在线</div> 
												<div class="ic"><input type="radio"  name="ctrl11" value="1" ${doorController.doors.size()==1 and doorController.doors.get(0).doorcontrol eq '1'? 'checked=true':''}>常开</div> 
												<div class="ic"><input type="radio"  name="ctrl11" value="2" ${doorController.doors.size()==1 and doorController.doors.get(0).doorcontrol eq '2'? 'checked=true':''}>常闭</div>								        			  					
										 	</div>
									  	</div>
									</div>
									
									<div class="fr_response_field col-sm-2"  >
									 	<div class="fr-form-group"> 
										 	<label class="fr-control-label">开门延时(s)</label>
										  	<div class="fr-form-block" data-type="fixed">
										        <input type="number"  class="fr-form-control" id="delay11" value="${doorController.doors.size()==1 ? doorController.doors.get(0).doordelay:3}"/>				  					
										 	</div>
									  	</div>
									</div>
																		
								   <%--  <div class="fr_response_field col-sm-2"  >
									 	<div class="fr-form-group"> 
										 	<label class="fr-control-label">进门</label>
										  	<div class="fr-form-block" data-type="fixed">
										       <input type="checkbox" class="fr-form-control mycheckbox" id="doors111" name="m:doorController:doorsnames" value="1"  ${doorController.doors.size()==1 and doorController.doors.get(0).doorenabled.substring(0,1) eq '1'? 'checked=true':''} validate="{required:false}"/>					  					
										 	</div>
									  	</div>
									</div>	 
									
									<div class="fr_response_field col-sm-2"  >
									 	<div class="fr-form-group"> 
										 	<label class="fr-control-label">出门</label>
										  	<div class="fr-form-block" data-type="fixed">
										        <input type="checkbox" class="fr-form-control mycheckbox" id="doors112" name="m:doorController:doorsnames" value="1" ${doorController.doors.size()==1 and doorController.doors.get(0).doorenabled.substring(1,2) eq '1'? 'checked=true':''} validate="{required:false}"/>				  					
										 	</div>
									  	</div>
									</div>	  --%>
									
									
									
							<div class="fr_response_field col-sm-2">
								<div class="fr-form-group">
									<label class="fr-control-label">所在区域</label>
									<div class="fr-form-block" data-type="fixed">
									    <input name="m:doorController:zoneid11" type="hidden"   id="zoneid11" value="${doorController.doors.get(0).zoneid}"/>						    					
									    <input type="text" data-key="#zoneid11" readonly="readonly"  class="form-control comboTree" data-toggle="dictionary" data-url="${ctx}/rdp/area/zone/list_json_tree.htm?" value="${doorController.doors.get(0).zonename}"  validate="{required:true}"/>
									</div>
								</div>
							</div>	
							
									   
							 	</c:if>
						 </div>
							
							
						<div style="display:none" id="menu_item2" name="form" method="post" action=""> 
						    <c:if test="${doorController.controllersn.substring(0,1)=='2' }"> 
								<div class="fr_response_field col-sm-2"  >
								 	<div class="fr-form-group"> 
									 	<label class="fr-control-label">1号门</label>
									  	<div class="fr-form-block" data-type="fixed">
									  	    <input id ="doorsid21"  type="hidden" value="${doorController.doors.size()==2?doorController.doors.get(0).doorid:''}"/>
									        <input type="text" title="1号门" class="fr-form-control door" id="doorsnames21" name="m:doorController:doorsnames" value="${doorController.doors.size()==2?doorController.doors.get(0).doorname:''}" validate="{required:false}"/>				  					
									 	</div>
								  	</div>
								</div>	
								<div class="fr_response_field col-sm-2"  >
								 	<div class="fr-form-group"> 
									 	<label class="fr-control-label">控制方式</label>
									  	<div class="fr-form-block dwh" data-type="fixed" >			
									        <div class="ic"><input type="radio"  name="ctrl21" value="3" ${doorController.doors.size()==2 and doorController.doors.get(0).doorcontrol eq '3' or  doorController.doors.size()==0? 'checked=true':''}>在线</div> 
											<div class="ic"><input type="radio"  name="ctrl21" value="1" ${doorController.doors.size()==2 and doorController.doors.get(0).doorcontrol eq '1'? 'checked=true':''}>常开</div> 
											<div class="ic"><input type="radio"  name="ctrl21" value="2" ${doorController.doors.size()==2 and doorController.doors.get(0).doorcontrol eq '2'? 'checked=true':''}>常闭</div>								        			  					
									 	</div>
								  	</div>
								</div>
								
								<div class="fr_response_field col-sm-2"  >
								 	<div class="fr-form-group"> 
									 	<label class="fr-control-label">开门延时(s)</label>
									  	<div class="fr-form-block" data-type="fixed">
									        <input type="number"  class="fr-form-control" id="delay21" value="${doorController.doors.size()==2?doorController.doors.get(0).doordelay:3}"/>				  					
									 	</div>
								  	</div>
								</div>
																 
							<%-- 	<div class="fr_response_field col-sm-2"  >
									 	<div class="fr-form-group"> 
										 	<label class="fr-control-label">进门</label>
										  	<div class="fr-form-block" data-type="fixed">
										        <input type="checkbox" class="fr-form-control mycheckbox" id="doors211" name="m:doorController:doorsnames" value="1" ${doorController.doors.size()==2 and doorController.doors.get(0).doorenabled.substring(0,1) eq '1'? 'checked=true':''} validate="{required:false}"/>				  					
										 	</div>
									  	</div>
								</div>	 
								<div class="fr_response_field col-sm-2"  >
								 	<div class="fr-form-group"> 
									 	<label class="fr-control-label">出门</label>
									  	<div class="fr-form-block" data-type="fixed">
									        <input type="checkbox" class="fr-form-control mycheckbox" id="doors212" name="m:doorController:doorsnames" value="1" ${doorController.doors.size()==2 and doorController.doors.get(0).doorenabled.substring(1,2) eq '1'? 'checked=true':''} validate="{required:false}"/>				
									 	</div>
								  	</div>
								</div>	 
								 --%>
								
								<div class="fr_response_field col-sm-2">
								<div class="fr-form-group">
									<label class="fr-control-label">所在区域</label>
									<div class="fr-form-block" data-type="fixed">
									    <input name="m:doorController:zoneid21" type="hidden"   id="zoneid21" value="${doorController.doors.get(0).zoneid}"/>						    					
									    <input type="text" data-key="#zoneid21" readonly="readonly"  class="form-control comboTree" data-toggle="dictionary" data-url="${ctx}/rdp/area/zone/list_json_tree.htm?" value="${doorController.doors.get(0).zonename}"  validate="{required:true}"/>
									</div>
								</div>
							</div>	
							
							   <br></br>
							
							
								
								 	<div class="fr-form-group col-sm-2"> 
									 	<label class="fr-control-label">2号门</label>
									  	<div class="fr-form-block" data-type="fixed">
									  	   <input id ="doorsid22"  type="hidden" value="${doorController.doors.size()==2?doorController.doors.get(1).doorid:''}"/>
									        <input type="text" title="2号门" class="fr-form-control door" id="doorsnames22" name="m:doorController:doorsnames" value="${doorController.doors.size()==2 ? doorController.doors.get(1).doorname:''}" validate="{required:false}"/>				  					
									 	</div>
								  	</div>
									
								
												
							
							
							
								<div class="fr_response_field col-sm-2"  >
								 	<div class="fr-form-group"> 
									 	<label class="fr-control-label">控制方式</label>
									  	<div class="fr-form-block dwh" data-type="fixed" >			
									        <div class="ic"><input type="radio"  name="ctrl22" value="3" ${doorController.doors.size()==2 and doorController.doors.get(1).doorcontrol eq '3' or doorController.doors.size()==0? 'checked=true':''}>在线</div> 
											<div class="ic"><input type="radio"  name="ctrl22" value="1" ${doorController.doors.size()==2 and doorController.doors.get(1).doorcontrol eq '1'? 'checked=true':''}>常开</div> 
											<div class="ic"><input type="radio"  name="ctrl22" value="2" ${doorController.doors.size()==2 and doorController.doors.get(1).doorcontrol eq '2'? 'checked=true':''}>常闭</div>								        			  					
									 	</div>
								  	</div>
								</div>
								
								<div class="fr_response_field col-sm-2"  >
								 	<div class="fr-form-group"> 
									 	<label class="fr-control-label">开门延时(s)</label>
									  	<div class="fr-form-block" data-type="fixed">
									        <input type="number"  class="fr-form-control" id="delay22" value="${doorController.doors.size()==2?doorController.doors.get(1).doordelay:3}"/>				  					
									 	</div>
								  	</div>
								</div> 
								<%-- <div class="fr_response_field col-sm-2"  >
									 	<div class="fr-form-group"> 
										 	<label class="fr-control-label">进门</label>
										  	<div class="fr-form-block" data-type="fixed">
										        <input type="checkbox" class="fr-form-control mycheckbox" id="doors221" name="m:doorController:doorsnames" value="1" ${doorController.doors.size()==2 and doorController.doors.get(1).doorenabled.substring(0,1) eq '1'? 'checked=true':''} />				  					
										 	</div>
									  	</div>
								</div>	 
								<div class="fr_response_field col-sm-2"  >
								 	<div class="fr-form-group"> 
									 	<label class="fr-control-label">出门</label>
									  	<div class="fr-form-block" data-type="fixed">
									        <input type="checkbox" class="fr-form-control mycheckbox" id="doors222" name="m:doorController:doorsnames" value="1" ${doorController.doors.size()==2 and doorController.doors.get(1).doorenabled.substring(1,2) eq '1'? 'checked=true':''}"/>				
									 	</div>
								  	</div>
								</div>	  --%>
								
											
							<div class="fr_response_field col-sm-2">
								<div class="fr-form-group">
									<label class="fr-control-label">所在区域</label>
									<div class="fr-form-block" data-type="fixed">
									    <input name="m:doorController:zoneid22" type="hidden"   id="zoneid22" value="${doorController.doors.get(0).zoneid}"/>						    					
									    <input type="text" data-key="#zoneid22" readonly="readonly"  class="form-control comboTree" data-toggle="dictionary" data-url="${ctx}/rdp/area/zone/list_json_tree.htm?" value="${doorController.doors.get(1).zonename}"  validate="{required:true}"/>
									</div>
								</div>
							</div>	
							
																					
							</c:if>				

 

 

 

事件方法:

 function upperCase(x)
			 {
				 
				 var sn = $("#ctlno").val();
				 if (sn.startsWith("1")) {					 
					$("#doorInfo").show();
					$("#menu_item1").show();
					$("#menu_item2").hide();
					$("#menu_item3").hide();					
				 }
				 else if (sn.startsWith("2")) {
					 $("#doorInfo").show();
					 $("#menu_item1").hide();
					 $("#menu_item2").show();
					 $("#menu_item3").hide();										 
				 }
				 else if (sn.startsWith("4")) {
					 $("#doorInfo").show();
					 $("#menu_item1").hide();
					 $("#menu_item2").hide();
					 $("#menu_item3").show(); 
				 }	
				 else{
					 $("#doorInfo").hide();
				 }			 
			 }
			 

 

 

调用API拓展:

$(selector).hide(speed,callback)

 callback 参数是一个在 hide 操作完成后被执行的函数。

定义和用法

toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。

该方法检查被选元素的可见状态。如果一个元素是隐藏的,则运行 show(),如果一个元素是可见的,则运行 hide() - 这会造成一种切换的效果。

注释:隐藏的元素不会被完全显示(不再影响页面的布局)。

提示:该方法可被用于自定义函数之间的切换。

 

 

参考资料:

https://blog.csdn.net/yunlang2012/article/details/26161831

 

相关标签: 【Jquery】