使用 getElementById 切换活动类答案

【问题标题】：Toogle active class using getElementById使用 getElementById 切换活动类
【发布时间】：2022-01-16 04:19:16
【问题描述】：

我正在尝试使用document.getElementById 将class 从无更改为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')"

我试了很多次，都没有切换。

【问题讨论】：

标签： javascript html jquery toggle

【解决方案1】：

这是我使用querySelector 和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>

【讨论】：

【解决方案2】：

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>

【讨论】：