gpt4 book ai didi

javascript - 子 visibility 影响父 visibility

转载 作者:行者123 更新时间:2023-11-30 19:30:49 27 4
gpt4 key购买 nike

$(document).ready 函数中通过 JavaScript 将子容器设置为 visibility: visible 时,我遇到了一个奇怪的问题。

问题是:

我有一个父元素,它有 bootstraps helperclass class="d-none"。我现在想将此元素的子元素的 CSS 设置为 visibility: visible。问题在于,只要 $(document).ready 函数在运行,父项及其子项就可见。

这意味着一些奇怪的事情正在发生,因为将一个可见元素包裹在一个隐藏元素中应该总是什么都不显示。但显然它确实显示了 parent 和 child 。

有人知道如何解决这个问题吗?

这里要具体一点:

  1. 我想调用$(document).ready函数
  2. 我不想在调用函数时看到 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% 理解您要解释的内容。这是我收集到的,如有任何不同请告知我:

  1. 您的 while 循环试图在未来某个时间显示 div。

    • 循环太快,无法用作您需要的计时器 setTimeout()
    • JavaScript 是异步的,因此如果您计划显示一个 div 然后再显示下一个(我在这里猜测是因为您并没有真正具体说明),您可能会先完成一个,也可能会晚一些。您可以使用 async functionawait 关键字使时间同步。
      • 异步:A 设置为 2 秒开始,B 设置为 2.5 秒开始,它们可能同时结束。
      • 同步:A 在 2 秒后开始,B 星在 2.5 秒后结束。
  2. 如果 parent 是隐藏的,您有权假设 child 是隐藏的 except 如果 parent 有 visibility:hidden并且子项具有 visibility: visible,父项将保持隐藏状态,而子项将可见。

  3. 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com