`

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

    博客分类:
  • JS
 
阅读更多
  • 如下代码,点击修改按钮时,修改按钮也一起隐藏掉了;
  • 后来将class="hide btn btnT"中的hide去掉,再将class="show btn btnT overlay_text"中的show去掉,一切正常;




<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">&nbsp;</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">&nbsp;</em>保存</a> 
		          <a title="取消" href="javascript:void(0);" class="show btn btnT overlay_text" onclick="$('#box66').hide(); $('#box6').show()" ><em class="icons icons-cancle">&nbsp;</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>



分享到:
评论

相关推荐

    Jquery+div+css鼠标经过下拉菜单

    在这个例子中,div被用作菜单项的容器,同时可能还包含隐藏的下拉菜单。通过添加特定的类名或ID,我们可以使用jQuery选择并操作这些div元素。 CSS(层叠样式表)用于定义网页的样式和布局。在下拉菜单的实现中,CSS...

    js 显示/隐藏某些列

    可以使用`querySelectorAll`或`children`属性来获取子元素列表,然后对每个元素应用上述显示或隐藏的方法。 5. **性能优化**:当处理大量元素时,避免一次性操作所有元素,而是考虑使用`requestAnimationFrame`或...

    jQuery featureList图片渐变切换_带图标的选项卡...

    创建选项卡结构时,通常会有一个包含多个子元素(每个子元素代表一个选项卡)的容器,每个子元素包括一个标题和一个内容区域。使用CSS将所有内容区域默认隐藏,然后在jQuery中编写逻辑,当点击某个标题时,显示对应...

    jquery二级高亮鼠标悬停下拉导航效果

    每个一级菜单项下可能嵌套另一个`&lt;ul&gt;`元素,包含`&lt;li&gt;`子元素作为二级菜单项。 CSS样式将用于定义导航菜单的基本外观,包括字体、颜色、位置等。对于高亮效果,可以设置一个特定的CSS类,例如`.active`,当鼠标...

    jQuery三图排列滑块幻灯片特效.zip

    4. 在jQuery事件处理函数中,使用`fadeIn()`和`fadeOut()`或`show()`和`hide()`方法来控制图片的显示与隐藏,同时通过修改CSS的`transform`属性实现滑动动画。 5. 如果需要,还可以添加箭头或指示器,以便用户手动...

    css+jquery导航

    1. **事件处理**:jQuery通过`.click()`、`.hover()`等函数简化了对用户交互的响应,例如,当用户悬停在父菜单项上时显示子菜单。 2. **DOM操作**:`.show()`, `.hide()`, `.fadeIn()`, `.fadeOut()`等方法控制元素...

    jquery 水平下拉导航

    - 使用 `.show()` 和 `.hide()` 方法来控制子菜单的可见性。 - 如果需要动画效果,可以使用 `.slideDown()`、`.slideUp()` 或 `.fadeIn()`、`.fadeOut()` 方法,配合指定的动画速度参数。 通过以上步骤,我们可以...

    jQuery手风琴下拉菜单收缩展开特效

    - 为了实现手风琴效果,HTML结构通常包含一个父容器,里面有多级子元素,每个子元素代表一个菜单项。子元素可能包括触发收缩和展开的标题,以及隐藏的内容区域。 7. **JavaScript逻辑**: - 当用户点击一个菜单...

    jQuery 右键Demo

    这可以通过`.show()`和`.hide()`方法来实现。 5. **多级菜单**:创建子菜单可以通过嵌套的`&lt;ul&gt;`结构来实现,通过判断当前点击的菜单项并动态调整可见性来控制菜单的展开与折叠。 6. **事件处理**:每个菜单项可能...

    jquery弹出菜单

    通过`$(parentElement).on('event', 'selector', function() {...})`可以在父元素上监听事件,当事件发生在匹配的子元素上时执行回调函数。 7. **插件(Plugins)**:jQuery社区提供了许多高质量的插件,如jQuery ...

    jQuery中多个元素的Hover事件解决方案

    比如,原本我们希望只有第一层的`li`元素字体大小为14像素,但因为结构的嵌套,第二层的`li`元素也被影响到了。为了解决这一问题,我们需要增加CSS选择器的特异性,或者使用后代选择器和子选择器来限制样式的应用...

    jquery实现的图片滚动图片放大展示带tab滑动选项卡标签的图片滚动特效源码.zip

    10. **事件委托**:对于动态生成的元素(如选项卡),可能使用事件委托(Event Delegation)来绑定事件,通过监听父元素的事件,然后判断触发事件的子元素来执行相应的函数。 要理解并运用这个源码,你需要熟悉...

    jQuery带子导航菜单特效.zip

    3. **CSS操作**:jQuery可以方便地修改元素的样式,如`show()`和`hide()`用于显示或隐藏元素,`fadeIn()`和`fadeOut()`则提供了平滑的淡入淡出效果。这些方法可以用来控制子导航菜单的可见性。 4. **动画**:jQuery...

    jQuery Cookbook - Lindley Cody.pdf

    jQuery的`context`参数允许在某个特定的父元素内部查找子元素,这在处理复杂的DOM结构时非常有用。 **示例代码:** ```javascript // 选取所有带有"class example"的元素,但只限于#parent元素内部 $('#parent ....

    jQuery&CSS图形下拉菜单

    例如,当鼠标悬停在父菜单项上时,通过`.show()`和`.hide()`方法来显示或隐藏对应的子菜单。此外,还可以添加一些自定义的动画效果,如滑动、淡入淡出等。 4. **响应式设计**:为了确保菜单在不同设备和屏幕尺寸上...

    jquery淘宝电器左侧分类菜单.zip

    - **DOM操作**:在事件处理函数中,我们可以使用`.show()`和`.hide()`方法来控制子菜单的显示和隐藏。为了实现自适应高度,可能需要计算并调整子菜单的高度,这可以通过`.height()`和`.css()`方法实现。 - **动画...

    使用jQuery实现仿2010京东商城商品分类导航菜单

    3. **DOM操作**:jQuery提供了方便的方法来操纵DOM,如`append()`、`hide()`和`show()`。在导航菜单中,我们可能需要在用户点击时动态添加或移除子菜单项。 4. **动画效果**:使用`fadeIn()`、`fadeOut()`或`...

    jquery实现的简单一级下拉菜单效果(简单实用).zip

    `&lt;ul&gt;`元素作为父容器,包含多个`&lt;li&gt;`元素,每个`&lt;li&gt;`元素可以进一步包含子`&lt;ul&gt;`,形成下拉菜单。通过CSS来控制菜单的样式和布局,使其符合设计需求。 3. jQuery实现下拉菜单的核心技术: - `$(document).ready...

    基于jquery的横向水平切换选项卡

    例如,可以使用`$('ul.tabs li')`来选取所有选项卡,然后使用`.eq(index)`选择特定的选项卡,或者使用`.children()`来选取子元素。 6. **动态内容加载**:如果选项卡内容是从服务器动态加载的,可以使用jQuery的...

    基于Jquery的轮播图

    轮播图的基本HTML结构通常包括一个容器元素,用于包裹所有幻灯片,每个幻灯片则作为一个单独的子元素。例如,可以使用`&lt;div&gt;`标签创建轮播容器,`&lt;img&gt;`标签展示图片,而`&lt;a&gt;`标签则可以添加链接。此外,还需要额外...

Global site tag (gtag.js) - Google Analytics