如何让切换面板默认不打开？切换是在 HTML 中的 JavaScript 上完成的

Question

所以我有一个页面，用户可以在其中找到“？”切换以阅读有关如何使用该页面的信息。 但是，每当页面加载（或重新加载/刷新）时，切换面板都会打开（就好像打开是其自然状态一样），并且只有在用户单击切换时才关闭（当面板打开时，切换面板会变成“ X”）。

如何才能让面板自然状态关闭？

document.querySelector(".panel-toggle").addEventListener("click", () => {
  document.querySelector(".panel-wrap").classList.toggle("panel-open");
});

.panel-wrap {
  display: flex;
  height: 80vh;
  margin-left: -20px;
  margin-top: 10px;
  position: fixed;
  z-index: 9999;
}

.panel-toggle {
  margin-top: 150px;
  width: 50px;
  height: 90px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background-color: #225b4e;
  border-radius: 0 5px 5px 0;
  border: none;
  outline: none;
  cursor: pointer;
}

.panel-open .panel-contenido {
  display: initial;
}

.panel-open .toggle-open {
  display: none !important;
}

.panel-open .toggle-close {
  display: initial !important;
}

<div class="panel-wrap">
  <div class="panel-contenido">
    <p class="titulo">INFORMATION</p>
    <p><span class="subtitle">Info</span> that is important.</p>
  </div>

  <button class="panel-toggle" type="button">
    <img class="toggle-open" width="30" height="30" src="https://www.svgrepo.com/show/126178/question-mark.svg" alt="?" />
    <img class="toggle-close" width="25" height="25" src="https://www.svgrepo.com/show/12848/x-symbol.svg" alt="x" />
  </button>
</div>

Answer 1

将类

.panel-open

添加到

.panel-wrap

元素。毕竟，切换按钮会切换什么。

<div class="panel-wrap panel-open">
  <div class="panel-contenido">
    <p class="titulo">INFORMATION</p>
    <p><span class="subtitle">Info</span> that is important.</p>
  </div>

  <button class="panel-toggle" type="button">
    <img class="toggle-open" width="30" height="30" src="https://www.svgrepo.com/show/126178/question-mark.svg" alt="?" />
    <img class="toggle-close" width="25" height="25" src="https://www.svgrepo.com/show/12848/x-symbol.svg" alt="x" />
  </button>
</div>