使用 getElementById 切换活动类

Posted 2023-02-18

【中文标题】使用 getElementById 切换活动类

【英文标题】：Toogle active class using 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')"

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

【参考方案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>