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
下一篇： html中的描述列表怎么表示