js修改display,在none和block之间切换不显示问题

您所在的位置:网站首页 js切换class js修改display,在none和block之间切换不显示问题

js修改display,在none和block之间切换不显示问题

2023-10-24 02:20| 来源: 网络整理| 查看: 265

                

目的:这是我的目的,要实现的效果

点击 回复a链接  ,输入框input所在父元素div,显示或隐藏。

input>div>div(这个最外层div,对应着问题一,和问题二无关)

问题一:display属性值修改成功不显示

一个div,初始属性值为:display:none;

通过点击某a链接,调用某js函数,修改其display值为block;

成功!但页面不显示。

*解决:其父元素设置最小高度,使其包含这个div

问题二:dislay属性值通过js函数切换,js里属性改变成功,页面没渲染

(切换前判断display属性值,赋予另一个值)

div的初始属性值为:display:none;

js函数第一次读取该元素的display值为"",没错~空白,不是none;

这时作者通过  元素.style.display="block",企图改变display的属性值;

成功!!  但……页面没显示,F12看该div元素,display值仍为none;

这时作者不得不百度,发现还有jquery的方法可以改变display的属性值。

          $("选择器").show();//表示display:block

Ok! 显示出来了,页面也成功了……                                                 

还没结束!!!!-------------------------------------------------------->从display:none到display:block(概括上面的内容)

再点击该超链接,调用该js函数,企图关闭显示,.让它display:none;时,页面又失效了,还是js成功,页面失效!

这时候用jquery的方法

         $("选择器").hidden();表示display:none

         没用!!!!

         必须用切换函数 $("选择器").toggle();      才能成功!!!

Ok!解决一轮切换

还没结束!!!!-------------------------------------------------------->从display:block到display:none(概括上面的内容)

        再一轮时,这时候元素已经隐藏,要让它显示

        这时候的display值不再是第一次的""空白,而是none!!!   display=none;

        判断条件需要将两种情况都考虑。

 

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3