在 $(document).ready 函数中通过 JavaScript 将子容器设置为 visibility: visible 时，我遇到了一个奇怪的问题。
问题是:
我有一个父元素，它有 bootstraps helperclass class="d-none"。
我现在想将此元素的子元素的 CSS 设置为 visibility: visible。
问题在于，只要 $(document).ready 函数在运行，父项及其子项就可见。
这意味着一些奇怪的事情正在发生，因为将一个可见元素包裹在一个隐藏元素中应该总是什么都不显示。 但显然它确实显示了 parent 和 child 。
有人知道如何解决这个问题吗？
这里要具体一点:
- 我想调用
$(document).ready函数 - 我不想在调用函数时看到 child ，也不想看到 parent ，因为下面的代码也不会显示 child 和 parent ，因为 parent 有“d-none”
.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设置子项的可见性时，在下面的代码片段中可以看到父项？
parent 应该仍然有“d-none”，因此它的所有 child 也不应该是可见的，或者我在这里理解错了什么？
要重现此问题，请将下面的代码片段复制到您的答案中并点击运行几次，您会看到黄色和红色矩形出现一小段时间，然后它们实际上不再可见。
$(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>最佳答案
首先让我说，我可能无法 100% 理解您要解释的内容。这是我收集到的，如有任何不同请告知我:
您的 while 循环试图在未来某个时间显示 div。
- 循环太快，无法用作您需要的计时器
setTimeout() - JavaScript 是异步的，因此如果您计划显示一个 div 然后再显示下一个(我在这里猜测是因为您并没有真正具体说明)，您可能会先完成一个，也可能会晚一些。您可以使用
async function和await关键字使时间同步。- 异步:A 设置为 2 秒开始，B 设置为 2.5 秒开始，它们可能同时结束。
- 同步:A 在 2 秒后开始，B 星在 2.5 秒后结束。
- 循环太快，无法用作您需要的计时器
如果 parent 是隐藏的，您有权假设 child 是隐藏的 except 如果 parent 有
visibility:hidden并且子项具有visibility: visible，父项将保持隐藏状态，而子项将可见。Bootstrap 类
.d-none完全不同。它是display:none;，它实际上从除 HTML 之外的所有内容中删除了该元素。使用visibility:hidden元素仍然占据空间。具有display:none的元素不占用空间。
function reveal(selector) {
$(selector).css('visibility', 'visible')
}
const selectors = ['.child', '.parent'];
const times = [3000, 5500];
async function sync(selectors, times) {
const showChild = () => {
return new Promise(resolve => {
setTimeout(() => resolve(reveal(selectors[0])), times[0]);
});
}
const showParent = () => {
return new Promise(resolve => {
setTimeout(() => resolve(reveal(selectors[1])), times[1]);
});
}
await showChild();
await showParent();
}
sync(selectors, times);.parent {
visibility: hidden;
background-color: red;
width: 100px;
height: 100px;
}
.child {
visibility: hidden;
background-color: yellow;
width: 50px;
height: 50px;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
<div class="parent">
<div class="child"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>关于javascript - 子 visibility 影响父 visibility ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56448492/