小编cod*_*oob的帖子

Javascript 和 CSS - 打开菜单有故障过渡

当菜单在彼此之上展开时,我有一些代码最初会出现故障。

如果您在第一个菜单中选择选项二,则会出现第二个选项。如果您随后打开第一个菜单,您会看到它在打开时出现故障 - 几乎有类似快门的延迟。也许它与 z 索引设置有关,我不确定?

在 Firefox 和 chrome 中,没有(明显的)故障。在 safari 中,下面的代码段有一个小故障。

为什么会出现故障?

const selected = document.querySelectorAll(".selected");
const optionsContainer = document.querySelectorAll(".options-container");

for (let i = 0; i < selected.length; i++) {
  selected[i].addEventListener("click", () => {
    optionsContainer[i].classList.toggle("open");
    selected[i].classList.toggle("open");

    for (let j = 0; j < selected.length; j++) {

      if (i != j && selected[j].classList.contains("open")) {
        optionsContainer[j].classList.toggle("open");
        selected[j].classList.toggle("open");
      }
    }
  });
}

for (let i = 0; i < optionsContainer.length; i++) {
  let optionsList = optionsContainer[i].querySelectorAll(".options");

  for (let j …
Run Code Online (Sandbox Code Playgroud)

javascript css z-index

6
推荐指数
1
解决办法
283
查看次数

标签 统计

css ×1

javascript ×1

z-index ×1