关于display:none隐藏不隐藏子元素

于 2023-02-01 18:19:05 发布
阅读量396 收藏
点赞数 1
分类专栏： 前端 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41154720/article/details/128838505
版权

今天发现display:none,看似使得下面的元素隐藏了，但是其实display:none不继承给子元素子元素只是迫于父元素不显示了所以才没办法现实的，其实依旧占位。

所以我使用了$(隐藏元素).children().hide()的方式把所有子元素都隐藏了，这些隐藏的元素也不会占位了哈哈哈

刘美丽的博客
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE7下父元素及子元素的隐藏顺序不当带来的display:none出现BUG
09-25
IE7下，先隐藏父元素，后隐藏子元素，再显示父元素，被隐藏的子元素重叠区域下面， 存在另一个可见的元素,则该display:none的子元素出现BUG;接下来介绍一下发生经过，感兴趣的朋友可以了解下啊，希望本文对你有帮助
CSS隐藏属性display:none；visibility:hidden；overflow:hidden
Jorpeng的博客
10-28 4017
前端CSS元素隐藏的知识（display:none；visibility:hidden；overflow:hidden；opacity: 0）
js获取隐藏元素的宽高
12-12
获取隐藏元素(display:none)的物理尺寸 问题及场景 假如我们有这样一个输入框，点击能展开选择。如下图： 在这里输入框和下方的展开区域是分离的，独立的两个控件！初始状态下面的可选框是隐藏的（ng-show=false） 展开区域中可折叠组件accordion（对应图中省份，排序字段，短消息部分）的高度是随着数据自适应撑开，点击accordion折叠收缩时有一个高度变化的动画效果！ 在计算accordion的高度时却无法获取数据节点元素的高度，导致accordion的高度为0，无法折叠！ 原因 在一个隐藏的div元素节点中无法获取它子元素的物理尺寸！即输入框下面的展开区域还是隐藏时
css display:none使用注意事项小结
10-30
web页面前台编码时经常用到display:none样式，平常使用时发现有几点特征需要注意
CSS 隐藏页面元素常用方法
weixin_30341735的博客
10-16 495
用CSS隐藏页面元素有许多种方法。你可以将opacity设为0、将visibility设为hidden、将display设为none或者将position设为absolute然后将位置设到不可见区域。 Opacity opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这意味着将opacity设为0...
利用css如何让嵌套的div层不继承父div层的透明度？
weixin_34186128的博客
08-14 691
http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRYIMNCkdMkAV36oR-RraFyyghs__ULNjlNiOGgkYOC 利用css如何让嵌套的div层不继承父div层的透明度？ http://blog.csdn.net/foart...
jquery的show()函数不会将某个div下面的style为“display:none”的a标签子元素也显示出来
干勾鱼的CSDN博客
10-21 7093
转载请注明出处：http://blog.csdn.net/dongdong9223/article/details/52884038 本文出自【我是干勾鱼的博客】 众所周知，jquery的show()函数用于显示隐藏元素，比如某个div。如果div下面还有一个子元素div，这个显示同样能把子元素也显示出来。但是要知道，如果某个div下还有一个a标签子元素也处于隐藏状态，使用show()函数显示
HTML有displaynone无法隐藏,display：none显示和隐藏
weixin_42613017的博客
06-04 4753
显示和隐藏问题#a{width: 500px;height: 300px;background-color: red;/*display:none;*/visibility:hidden;}#b{width: 100px;height: 200px;background-color: green;display:block;/*display:none;*/visibility: hidden;}...
三种隐藏方式：display:none,visibility:hidden,opacity:0的区别
m0_52943868的博客
04-01 3624
1、display:none隐藏 display:black 显示 2、visibility: hidden 隐藏 visibility: visible 显示 3、 opacity: 0 隐藏 opacity：1 显示 其三者的区别： 1、时间绑定 display 的元素已经不再页面 所及无法触发上面的绑定时间 visibility: hidden ：元素上绑定的时间也无法触发 opacity：透明度为0 其实际还在 所及可以触发上边的绑定时间 2、对于空间的占用 display:n..
display none 隐藏后怎么显示_web前端入门到实战：元素显示隐藏的9种思路
weixin_39922534的博客
11-21 1021
在网页制作中，元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路display对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等注意：如果要适用于任何元素需要提前储存元素的display值显示隐藏测试文字 visibil...
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
09-05
多数情况下隐藏(设置display:none)一个元素，无需依次将其内的所有子元素都隐藏。非要这么做，有时会碰到意想不到的bug。
html display none取消,将displaynone取消
weixin_35896299的博客
06-25 9894
这个HTML中用display:none;隐藏了的属性该怎么让它代码和样式如上用js， 给ul个id var ui = document.getElementById("aa"); ui.style.display=" ";//display为空的话会好使。css中display怎么做显示或隐藏就像这样的，点击上面，下面会出现相应的内容，看了半天的文字介绍还是display：none可以隐藏某个元...
jQuery获取 跳过隐藏（display:none）元素的方法
m0_46129241的博客
01-19 1989
问题：在给ul li中的元素渲染时，有些li是display:none，需要跳过这些隐藏的元素。一开始我是使用css中的 :nth-child(n)，但这个n值它不会跳过隐藏的li。 方法：经过尝试发现使用纯CSS无法实现跳过隐藏的元素。摸索得知可使用jquery中的eq方法，具体方法如下： HTML <ul> <li style="display:none">1&l...
【CSS】CSS元素隐藏：display:none | visibility:hidden | opacity:0 的区别
ColdCoder的博客
04-07 1260
我们有几种方式可以隐藏一个元素： CSS position绝对定位，使元素位于可视范围外 type="hidden"的表单元素。 宽度和高度都显式设置为0。 CSS display的值是none。 CSS visibility的值是hidden CSS opacity的值是0 下面重点是说一下常用即面试常被问到的三种隐藏元素方式：display: none | visibility: hidden opacity: 0 基本功能： display: none: 元素自身及后代元素都会隐藏，隐藏后的元素无
web学习---隐藏显示定位
qq_42862581的博客
07-29 198
一、Css的显示隐藏 display：none，可以设置元素隐藏 Visibility：hidden，也可以设置元素隐藏 区别：visibility隐藏了元素，但是元素所占的空间还在，display不会， 例如 h1 {visibility:hidden;} h1 {display:none;} 二、定位 position:static 是定位的默认值，没有定位效果，正常的显示在瀑布...
css_元素的显示与隐藏
qq_43260366的博客
09-28 557
display隐藏元素时-该元素被隐藏，不占据位置；隐藏元素时-子元素被一起隐藏，且不可以通过display:block;将子元素显示；元素隐藏时-对该元素设置的事件将不起做用；visibility隐藏元素时-该元素被隐藏，但是仍然保留元素的位置；隐藏元素时-子元素被一起隐藏，但可以通过visibility:visibilie;将子元素显示；元素隐藏时-对该元素设置的事件将不起做用；opacity隐藏元素时-该元素被隐藏，但是仍然保留元素的位置；
display:none 与 visibility:hidden 的区别
weixin_39307273的博客
02-14 1058
除了是否占据空间外，还有其他区别要注意 1、空间占据 display:none 隐藏后不占据额外空间，相当于删除元素 visibility:hidden占据着空间 opacity:0占据着空间 2、子元素继承 display:none 元素被删除，子元素也会被删除，自然也就不会显示 visibility:hidden 子元素具有继承性，可以通过设置子元素v...
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素，子元素依然能显示bug...
weixin_34256074的博客
07-18 90
多数情况下隐藏(设置display:none)一个元素，无需依次将其内的所有子元素都隐藏。非要这么做，有时会碰到意想不到的bug。如下 1，两个div，d1中包含d2 2，d1，d2都设置了absolute或relative 3，隐藏d1 4，隐藏子元素d2 5，显示d1 这时IE6/7 and IE8/9/10(IE7模式)中会发现，子元素d2也能显示出了(别忘了，d2被disp...
select option里面的下拉根据实际情况显示隐藏。写display:none为什么不隐藏呢？
肖肖肖丽珠的博客
03-11 1230
题型，我想让复合题。根据接口给的数据判断是隐藏还是显示 <select name="questiontype" lay-verify="" data-role="questiontypelist" lay-filter ='Tsquestiontype'> <option value="">题型</opti...
style="display:none" 不生效的原因
最新发布
05-23
`style="display:none"` 可以用来将 HTML 元素隐藏起来，但是它可能不生效的原因有以下几点： 1. 语法错误：如果你在 `style` 属性中使用了错误的 CSS 语法，则该属性可能不起作用。 2. CSS 权重：如果你在样式表中定义了与 `style="display:none"` 冲突的样式规则，则后者可能不起作用。这是因为 CSS 样式表中的样式规则有优先级，即所谓的“CSS 权重”。 3. JavaScript 操作：如果在 JavaScript 中修改了元素的样式，则 `style="display:none"` 可能会被覆盖。 4. 父元素的样式：如果元素的父元素具有“`display:none`”或“`visibility:hidden`”等隐藏样式，则子元素的 `style="display:none"` 也将被隐藏。 5. 浏览器兼容性：某些浏览器可能不支持 `style="display:none"`。在这种情况下，可以尝试使用其他的 CSS 属性来隐藏元素（例如，`visibility:hidden` 或 `opacity:0`）。 如果以上这些都没有解决问题，可以考虑使用 JavaScript 或其他技术来隐藏元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值