研究jQuery的show()的display属性

最新推荐文章于 2023-06-15 15:44:35 发布
最新推荐文章于 2023-06-15 15:44:35 发布
阅读量1.1k 收藏 2
点赞数 1
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/u/1540325/blog/424648
版权
在项目中遇到jQuery的show()方法导致display属性异常的问题。隐藏后再显示元素时，显示样式出现问题，发现jQuery可能不会保持之前设置的display样式。解决方法是在show()后使用css()设置正确的display属性。研究发现，当元素使用position: absolute或float属性脱离文档流时，show()会将display设为block。因此，需要注意对这些元素手动调整display属性。
摘要由CSDN通过智能技术生成

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1.问题现象 

           在我的项目中本来有一个标签本来是inline元素，但是我把他的display设置成了inline-block，后面就是我有隐藏和显示的切换，结果先隐藏一次，再一次切换到显示就出了问题。

            效果图如下，我们

            095845_gZGt_1540325.png            

             当隐藏之后，在切换回来，效果如下图：

             100155_b8BF_1540325.png

下面是那个自定义那个框里面的小三角的HTML和样式，后面那个日期图标的样式就不看了，基本原理是一样的




                

        

        




    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  weixin_34296641
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
JQuery—display和Show()方法

				
			

			

				

					Lningrui的专栏
				

				

					12-21
					
					8558
					
				

			

		

		

			
				


显示隐藏的匹配元素。

这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
HTML 代码:
Hello


jQuery 代码:
$("p").show("fast",functio

			
		

	



                

            
              



	

		

			

				
					
jquery设置display属性_jQuery 切换效果方法

				
			

			

				

					weixin_39625782的博客
				

				

					01-28
					
					1724
					
				

			

		

		

			
				
好好学习，天天向上本章主要内容是：显示和隐藏方法 hide() 和 show() 方法、滑动显示隐藏 slideDown() 和 slideUp() 方法、淡入淡出 fadeIn() 和 fadeOut() 方法一、显示和隐藏方法 hide() 和 show() 方法hide()：元素隐藏，隐藏的前提必须是元素 display:block；show()：元素显示，显示的前提必须是元素 displa...

			
		

	



              


  
              

                


	

		

			

				
					
jquery的show用display:none来做

				
			

			

				

					 飞翔的熊blabla
				

				

					11-05
					
					974
					
				

			

		

		

			
				
html>head>  style>p { background:yellow; }style>  script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js">script>head>body>  button>Show itbutton>      p style="display: none">Hello  2p>script

			
		

	





	

		

			

				
					
display: none;     与    jq    show方法之间的联系

				
			

			

				

					weixin_30530339的博客
				

				

					04-02
					
					144
					
				

			

		

		

			
				
1. 定义四种常用隐藏元素的方式，然后调用 jq 的 show 方法显示，观察各原先隐藏元素的 display 表现，结合 jq 源码，show 方法设置 元素 display 属性值为 隐藏时的 display


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="...

			
		

	



		

			
		



	

		

			

				
					
jQuery之动画-显示和隐藏

					
最新发布

				
			

			

				

					
				

				

					06-15
					
					600
					
				

			

		

		

			
				
本质就是给这个元素设置了。

			
		

	





	

		

			

				
					
jquery控制display属性为none或block

				
			

			

				

					10-26
				

			

		

		

			
				
在jQuery中，控制元素的display属性为none或block可以通过多种方法实现，以下是一些重要的知识点：  1. 使用.css()方法： jQuery的.css()方法可以用来设置或返回匹配元素的样式属性。当你想隐藏或显示一个元素时，...

			
		

	





	

		

			

				
					
分别通过javaScript和jquery控制display属性是否显示

				
			

			

				

					NullPointerException的博客
				

				

					05-04
					
					572
					
				

			

		

		

			
				
js&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt;
&lt;title&gt;display&lt;/title&gt;
    &lt;script type=&quo

			
		

	





	

		

			

				
					
jquery 设置style:display的方法

				
			

			

				

					12-02
				

			

		

		

			
				
它是个集合肯定有display属性 $(“#id”).show()表示display:block, $(“#id”).hide()表示display:none; $(“#id”).toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

			
		

	





	

		

			

				
					
php show跟display,设置display='block'与设置.show();有和区别？

				
			

			

				

					weixin_35143455的博客
				

				

					03-26
					
					521
					
				

			

		

		

			
				
设置display='block'与设置.show();有和区别？mip版关注:295答案:2悬赏:50解决时间 2021-01-26 16:27已解决2021-01-25 19:42设置display='block'与设置.show();有和区别？最佳答案2021-01-25 20:51.show();是jq的方法，必须引用jq才可以用，display='block'是JS写法，可以...

			
		

	





	

		

			

				
					
jQuery中的动画效果

				
			

			

				

					努力的zhiyi
				

				

					03-30
					
					507
					
				

			

		

		

			
				
jQuery中的动画效果show()  显示 display:block/inline-block;hide()  隐藏 display:none;实现原理：在元素内部将display的属性改变可以在()里面传递参数 数字 设置消失的时间消失时是渐变消失的参数slow(200毫秒) normal(400毫秒) fast(600毫秒)写错或是不写值时 默认值是normal可以传递回调函数 可以实现列...

			
		

	





	

		

			

				
					
js显示隐藏 display visibility以及jquery里的show hide的区别

				
			

			

				

					m0_62360527的博客
				

				

					05-31
					
					1421
					
				

			

		

		

			
				
js显示隐藏 display visibility以及jquery里的show hide的区别

			
		

	





	

		

			

				
					
Css的display与JQuery的show()、hide()，displayjquery

				
			

			

				

					weixin_38091374的博客
				

				

					02-05
					
					5631
					
				

			

		

		

			
				
两者可以配合使用，从而实现块的隐藏与显示

show()方法对应display:block; 或 inline

hide()方法对应display:none;



怎用jquery动态更改元素的display属性




sdfsdfsdfsd
$("#div1").attr("display","block"); 
$("#div1").css("display

			
		

	





	

		

			

				
					
利用jquery控制display属性变化

					
热门推荐

				
			

			

				

					had_meno的博客
				

				

					10-20
					
					4万+
					
				

			

		

		

			
				
我想实现的效果是，点击一个区域，另一个区域出现或者消失，我的布局如下：

			
		

	





	

		

			

				
					
JQuery Show()的几种效果 总有一种是你需要的

				
			

			

				

					FruitHardCandy的专栏
				

				

					09-17
					
					1212
					
				

			

		

		

			
				
1 show()方法和hide()方法


$("selector").show()

 从display:none还原元素默认或已设置的display属性$("selector").hide()

 设置元素的display样式为none，等于$("selector").css("display","none")
（注：
传入参数后，.show()和.hide()方法同时动画改...

			
		

	





	

		

			

				
					
使用jquery修改display属性

				
			

			

				

					dxyzhbb的博客
				

				

					04-17
					
					1万+
					
				

			

		

		

			
				
使用jquery修改display相当于修改一个css样式，因为display本身属于一个css属性，jquery修改display很简单，你只要知道如何使用jquery改变css就可以了

display是css的标准属性之一，常用的display属性值有：

block : 块对象的默认值。用该值为对象之后添加新行
none : 隐藏对象。与visibility属性的hidden值不同，其不为...

			
		

	





	

		

			

				
					
jquery  设置style:display 其实很方便的哦

				
			

			

				

					weixin_30266829的博客
				

				

					11-30
					
					599
					
				

			

		

		

			
				
("#id").css('display','none');$("#id").css('display','block');或$("#id")[0].style.display = 'none';$("#id")返回的是JQuery它是个集合肯定有display属性$("#id").show()表示display:block, $("#id").hide()表示display:...

			
		

	





	

		

			

				
					
jquery的show()函数不会将某个div下面的style为“display:none”的a标签子元素也显示出来

				
			

			

				

					干勾鱼的CSDN博客
				

				

					10-21
					
					7133
					
				

			

		

		

			
				
转载请注明出处：http://blog.csdn.net/dongdong9223/article/details/52884038 
  本文出自【我是干勾鱼的博客】
众所周知，jquery的show()函数用于显示隐藏元素，比如某个div。如果div下面还有一个子元素div，这个显示同样能把子元素也显示出来。但是要知道，如果某个div下还有一个a标签子元素也处于隐藏状态，使用show()函数显示

			
		

	





	

		

			

				
					
深入理解jQuery链式调用与show方法的实现原理

				
			

			

				

					
				

			

		

		

			
				
本文将深入解析jQuery中的链式调用与show方法。首先回顾上文提到的jQuery框架，它是一个广泛用于简化JavaScript操作DOM（文档对象模型）的工具，使得处理HTML元素变得更加便捷。在本篇中，我们关注的重点是jQuery的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值