使用 getElementById 切换活动 class

Question

我正在尝试使用 document.getElementById 将 class 从 none 更改为 active，但它只是添加 active 而不是删除它。

page.html

function toggleIt() {
  let collapseModel = document.getElementById(`collap_id`).className += "content active";
  collapseModel[0].classList.toggle("active")
}

.content {
  padding: 10px 20px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.content.active {
  padding: 10px 20px;
  display: block;
  overflow: hidden;
  background-color: #f1f1f1;
}

<button onclick="toggleIt();">Open</button>

<div class="content" id="collap_id">
  Here will be all the details
</div>

当我点击toggle it然后它是打开而不是关闭时，它还显示"Uncaught TypeError: Cannot read properties of undefined (reading 'toggle')"

我试了很多次都不切换

Answer 1

1) getElementById 会给你一个 HTML 元素所以不需要使用指数.

2) 你只需要使用 toggle 方法切换它

function toggleIt() {
  let collapseModel = document.getElementById(`collap_id`);
  collapseModel.classList.toggle("active")
}

function toggleIt() {
  let collapseModel = document.getElementById(`collap_id`);
  collapseModel.classList.toggle("active")
}

.content {
  padding: 10px 20px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.content.active {
  padding: 10px 20px;
  display: block;
  overflow: hidden;
  background-color: #f1f1f1;
}

<button onclick="toggleIt();">Open</button>

<div class="content" id="collap_id">
  Here will be all the details
</div>

Answer 2

这是我使用 querySelector and addEventListener 的提议。

const btn = document.querySelector(".btn");
const msg = document.querySelector(".content");

btn.addEventListener("click", () => {
  msg.classList.toggle("active");
});

.content {
  display: none;
}

.active {
  padding: 10px 20px;
  display: block;
  overflow: hidden;
  background-color: #f1f1f1;
}

<button class="btn">
  open
</button>

<div class="content" id="collap_id">
  Using querySelector and addEventListener.
</div>

使用 getElementById 切换活动 class

Toogle active class using getElementById

html

javascript

jquery

toggle