jquery的hide()方法，隐藏父容器，子元素也被隐藏的原因

最新推荐文章于 2021-06-04 11:41:08 发布

iteye_9434

最新推荐文章于 2021-06-04 11:41:08 发布

阅读量1.8k

点赞数

分类专栏： JS 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_9434/article/details/82339431

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

[list]
[*]如下代码，点击修改按钮时，修改按钮也一起隐藏掉了；
[*]后来将class="hide btn btnT"中的hide去掉，再将class="show btn btnT overlay_text"中的show去掉，一切正常；

[/list]


<div id="box6" style="display:block" class="stu_cantainer">
	        <table width="100%" border="0" cellspacing="0" cellpadding="0">
		         <tr>
		           <td  colspan="4" align="center" valign="top">
		           <div class="edit_info " ><a class="hide btn btnT" href="javascript:void(0);" onclick="$('#box6').hide(); $('#box66').show()" ><em class="icons icons-edit"> </em>修改</a> </div>
		           </td>
		         </tr>
				 <tr>
				    <td width="25%" class="trr">家庭住址：</td>
				    <td width="25%">${enrStudentEpitaxyInfo.fhomeAddress}</td>
				    <td width="25%" class="trr">邮政编码：</td>
				    <td width="25%">${enrStudentEpitaxyInfo.fzipCode}</td>
				</tr>
				<tr>
			    <td class="trr">家庭电话：</td>
			    <td>${enrStudentEpitaxyInfo.fhomePhone}</td>
			    <td class="trr">家庭电子信箱：</td>
			    <td>
			    ${enrStudentEpitaxyInfo.fhomeEmail}
			    </td>
			    </tr>
	        </table>
        </div>

        <div id="box66" style="display:none" class="stu_cantainer">
	        <form:form id="jttx_info" modelAttribute="enrStudentEpitaxyInfo" action="${ctx }/student/enrStudentEpitaxyInfo/saveJttx" method="post">
	         <input type="hidden" value="${enrStudentEpitaxyInfo.fid }"  name="fid" />
			 <input type="hidden" value="${fid }"  name="enrStudentInfo.fid" />

	        <table width="100%" border="0" cellspacing="0" cellpadding="0">
		        <tr>
		          <td  colspan="4" align="center" valign="top">
		          <div class="edit_info " >
		          <a title="保存" href="javascript:void(0);" class="show btn btnT overlay_text" onclick="submitAjaxForm('jttx'); " ><em class="icons icons-noThrough"> </em>保存</a> 
		          <a title="取消" href="javascript:void(0);" class="show btn btnT overlay_text" onclick="$('#box66').hide(); $('#box6').show()" ><em class="icons icons-cancle"> </em>取消</a> 
		          </div>
		          </td>
		        </tr>
			    <tr>
			    <td width="25%" class="trr">家庭住址：</td>
			    <td width="25%"> 
					         <input type="text" name="fhomeAddress" value="${enrStudentEpitaxyInfo.fhomeAddress}"/>
			    </td>
			    <td width="25%" class="trr">邮政编码：</td>
			    <td width="25%"> 
					        <input type="text" name="fzipCode" value="${enrStudentEpitaxyInfo.fzipCode}"/>
			    </td>
			    </tr>
			    <tr>
			    <td class="trr">家庭电话：</td>
			    <td>
					        <input type="text" name="fhomePhone" value="${enrStudentEpitaxyInfo.fhomePhone}"/>
			    </td>
			    <td class="trr">家庭电子信箱：</td>
			    <td>
					        <input type="text" name="fhomeEmail" value="${enrStudentEpitaxyInfo.fhomeEmail}"/>
			    </td>
			    </tr>
		    </table>
		  </form:form>  
        </div>