子可见性影响父可见性
在通过$(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>
回答 2
Stack Overflow用户
发布于 2019-06-05 02:46:41
让我开始说，我可能不是100%理解你试图解释的东西。这是我收集到的，如果有任何不同之处，请告诉我：
- 您的while循环试图在未来的某个时间显示这些div。
- loops are way too fast to be any use as a timer you need `setTimeout()`
- JavaScript is asynchronous so if you plan to reveal one div and then the next (I'm guessing here because you weren't really specific), you'll get one possibly finishing before another or possibly way later. You can make times synchronous by using `async function` and `await` keyword.
- asynchronous: A set to start at 2secs and B set to start at 2.5secs they'll both end possibly at the same time.
- synchronous: A starts at 2secs and ends B stars 2.5secs later.
如果父类是隐藏的，除了，如果父类有visibility:hidden，而子类有visibility: visible，那么父类将保持隐藏，而子类将是visibility: visible类，.d-none是完全不同的类。如果父类是隐藏的，而子类是隐藏的，那么除了之外，如果父类有visibility:hidden，而子类有visibility: visible，则父类将保持隐藏，而子类将是.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>
Stack Overflow用户
发布于 2019-06-05 01:39:16
检查此代码。我修好了一些零件。
function myFunction(){
if (1 === 1) {
$(".visi").css("visibility", "visible");
var i = 0;
while(i < 100){
console.log(i++);
}
}
}.visi {
background-color: yellow;
width: 50px;
height: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="d-none">
<div class="visi" style="visibility: hidden;" ></div>
</div>
<button onclick="myFunction()">Click me</button>
可以在开始时将可见性设置为隐藏，然后将其设置为可见
https://stackoverflow.com/questions/56448492
复制相似问题