Question

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

问题出在这里

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

这意味着正在发生一些奇怪的事情，因为将可见元素包装在隐藏元素中应该始终不显示任何内容。但显然它确实显示了父母和孩子。

有人知道如何解决此问题吗？

在此进行具体说明：

我想调用$(document).ready函数
调用该函数时，我不想看到孩子，也不想看到父母，因为以下代码也不会显示孩子或父母，因为父母没有“ 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设置孩子的可见性时，为什么在下面的代码段中可以看到父对象？

父级仍应为“ d-none”，因此其所有子级也不应可见，或者我在这里理解错了吗？

要重现此问题，请将下面的代码段复制到您的答案中，然后单击运行几次，您将看到黄色和红色的矩形显示一小段时间，然后它们实际上不再可见了。

$(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>

Answer 1

首先让我说，我可能不理解您尝试解释的内容的100％。这是我收集的信息，如有任何区别，请通知我：

您的while循环是尝试在将来的时间显示div。
- 循环太快了，无法用作您需要的计时器setTimeout()
- JavaScript是异步的，因此，如果您计划先显示一个div，然后再显示下一个div（我猜这里是因为您不是很具体），那么您可能会先完成一个div，然后再进行另一个。您可以使用async function和await关键字使时间同步。
  - 异步：A设置为2秒开始，B设置为2.5秒开始，它们都可能同时结束。
  - 同步：A从2秒开始，到B星在2.5秒后结束。
如果父母被隐藏，则您有权假定孩子被隐藏了。除了，如果父母有visibility:hidden而孩子有{ {1}}父级将保持隐藏状态，子级将可见。
引导类visibility: visible完全不同。 .d-none实际上从HTML之外的所有元素中删除了该元素。使用display:none;时，元素仍会占用空间。带有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;
}

Answer 2

检查此代码。我修理了一些零件。

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>

您可以在开始时将可见性设置为隐藏，然后将其设置为可见

儿童可见度影响父母可见度

2 个答案: