子可见性影响父可见性
子可见性影响父可见性
提问于 2019-06-05 01:11:00
在通过$(document).ready函数中的JavaScript将子容器设置为visibility: visible时，我遇到了一个奇怪的问题。
以下是问题所在：
我有一个父元素，它有引导帮助类class="d-none"。现在我想将这个元素的子元素的CSS设置为visibility: visible。问题是，只要$(document).ready函数还在运行，父函数及其子函数就是可见的。
这意味着发生了一些奇怪的事情，因为在隐藏元素中包装可见元素应该始终不显示任何内容。但很明显它同时显示了父母和孩子。
有人知道怎么解决这个问题吗？
具体地说：
- 我想调用
$(document).ready函数 - 我不想在调用函数时看到子级，也不想看到父级，因为下面的代码也不显示子级和父级，因为父级有“d-
- ”
.parent{
width: 100px;
height: 100px;
}
.child{
width: 50px;
height: 50px;
visibility: visible;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="parent d-none">
<div calss="child">
</div>
</div>
当通过js设置子对象的可见性时，为什么在下面的代码片段中可以看到父对象？
父级应该仍然是"d-none"，因此它的所有子级也应该是不可见的，或者我在这里理解错了什么？
要重现此问题，请将下面的代码片段复制到您的答案中，并点击run几次，您将看到黄色和红色的矩形显示一小段时间，然后它们实际上不再可见。
$(document).ready(function() {
$(".visi").css("visibility", "visible");
});.d-none {
background-color: red;
width: 100px;
height: 100px;
}
.visi {
background-color: yellow;
width: 50px;
height: 50px;
}<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="d-none">
<div class="visi" style="visibility: visible;"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56448492
复制相关文章
相似问题