.toggle()函数w/ classList不适用于一个元素，但适用于其他元素

Question

当我点击时，我试图在html元素上添加一个类页面的另一个元素，但尽管我做了所有的尝试，它仍然不起作用。

我的代码

:

<div class="container">
<div class="contenu">
<h2>Titre du contenu</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
<div class="popupBtn">
</div>
</div>

javascript代码:

let popupBtn = document.querySelector('.popupBtn');
let container = document.querySelector('.container');
popupBtn.onclick = function() {
container.classList.toggle('active');
//console.log(container.classList.toggle('active'));
};

所以我认为应该添加的javascript函数(或删除)类"活跃"元素拥有类"容器",但评论console.log()返回false每次点击时,当我取消它应该返回或者truefalse当我点击几次元素。

但是当我替换

container.classList.toggle('active');

popupBtn.classList.toggle('active');

它可以很好地工作，并添加一个类'active'与'popupBtn'类元素。

有人遇到过这样的问题吗?我在网上找不到这种东西。提前谢谢大家:)

Answer 1

这是你想要做的吗?

在console.log中设置.contains而不是.toggle。

我刚刚添加了一个随机的css类，看看发生了什么。

let popupBtn = document.querySelector('.popupBtn');
let container = document.querySelector('.container');
popupBtn.onclick = function() {
container.classList.toggle('active');
console.log(container.classList.contains('active'));
};

.active{
background-color: red;
}

<div class="container">
<div class="contenu">
<h2>Titre du contenu</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
<div class="popupBtn">text
</div>
</div>