Question

所以我有这样的功能，它在第一次点击时不起作用，但在第二次点击时有效。如何解决？

let coll = document.getElementsByClassName('collection');
let dis = document.getElementsByClassName('display');

document.getElementById("menu-btn1").addEventListener("click", function() {
  if(coll[0].style.display == 'none') 
  {
    coll[0].style.display = 'block';
    dis[0].style.display = 'none';
  }
  else 
  {
    coll[0].style.display = 'none';
  }
});

.collection {
    width: 80vh;
    height: 85vh;
    background-color: blue;

    display: none;
    grid-column: 4 / 10;
    grid-row: 2 / 9;
    justify-self: center;
    z-index: 3;
}

<div class="collection"></div>

（是的 - 我之前一直在寻找这样的案例，但其中大部分是 jQuery，我不明白，请帮忙）

Answer 1

因为 coll[0].style.display = 'block'; 搜索内联样式并且您在 css 类上添加了 display: none;，所以如果您正在检查样式，则需要像这样添加内联样式：< /p>

<div class="collection" style="display:none;"></div>

在这里您可以看到具有正确样式的代码段

let coll = document.getElementsByClassName('collection');
let dis = document.getElementsByClassName('display');

document.getElementById("menu-btn1").addEventListener("click", function() {
  if(coll[0].style.display == 'none') 
  {
    coll[0].style.display = 'block';
    //dis[0].style.display = 'none';
  }
  else 
  {
    coll[0].style.display = 'none';
  }
});

.collection {
    width: 80vh;
    height: 85vh;
    background-color: blue;
    grid-column: 4 / 10;
    grid-row: 2 / 9;
    justify-self: center;
    z-index: 3;
}

<div class="collection" style="display:none;">
</div>

<button id="menu-btn1">Toggle</button>

Answer 2

我建议清理你的代码并使用类切换来隐藏和显示它

你的 CSS：

.collection {
    width: 80vh;
    height: 85vh;
    background-color: blue;

    grid-column: 4 / 10;
    grid-row: 2 / 9;
    justify-self: center;
    z-index: 3;
}
.hidden {
    display: none;
}

您的 HTML：

<div class="collection hidden"></div>
<div class"display"></div> <!--I was assuming your .display element was visible at first and you wanted to hide it afterwards-->

你的 JS：

let coll = document.getElementsByClassName('collection');
let dis = document.getElementsByClassName('display');

document.getElementById("menu-btn1").addEventListener("click", function() {
  coll[0].classList.toggle("hidden");
  dis[0].classList.toggle("hidden");
});

这样您的代码就更干净了，而且由于您为 display: none; 创建了一个单独的类，因此当您应用“display: none;”时，您可以避免 CSS 中选择器样式层次结构的棘手问题。到该类的所有元素，但只尝试更改该类中元素之一的显示

Answer 3

我觉得你分享的代码不完整，我在htmlmenu-btn1和display中看不到这些类，你可以上传代码到github示例或您喜欢的任何其他工具

它不适用于第一次点击，但适用于第二次。如何解决？

3 个答案: