Classlist toggle无法为div添加/切换类名

Question

Classlist toggle无法为div添加/切换类名

3

我的目标是每次按下按钮时显示一个列表，就像下拉列表一样，所以我制作了一些测试用的HTML、CSS和JS文件，但不知何故它不起作用，我的JS代码中的日志函数在控制台输出单词“year”，但类列表切换似乎没有改变/添加div类的"active"。

以下是我的JS代码。

function btnFunction(identifier){
console.log(identifier)
var element = document.getElementById(identifier);
element.classList.toggle("active");}

以下是我的HTML代码。

<div class="modal-content-col-6-drop">
  <button onclick="btnFunction('year')" class="drop-btn">sample</button>
</div>

 <div id="year" class="select">
    <ul>
      <li>0 Year</li>
      <li>1 Year</li>
    </ul>
 </div>

以下是我的 CSS。

#year{
  display: none;
}
.active{
  display: block;
}

- IAmGroot0517

2个回答

0

你需要在你的 CSS 中添加 !important

function btnFunction(identifier) {
  console.log(identifier)
  var element = document.getElementById(identifier);
  element.classList.toggle("active");
}

#year{
  display: none;
}
.active{
  display: block !important;
}

<div class="modal-content-col-6-drop">
  <button onclick="btnFunction('year')" class="drop-btn">sample</button>
</div>

 <div id="year" class="select">
    <ul>
      <li>0 Year</li>
      <li>1 Year</li>
    </ul>
 </div>

- Mister Jojo

请不要使用!important。相信我，它会创建难以维护的代码。 - Achtung

@IAmGroot0517，尽管在这个片段中它能够正常工作，但你的代码可能存在其他问题。 - Mister Jojo

@Mister Jojo，仅仅因为某个东西存在并不意味着在所有任务中使用它是一个好主意。巴祖卡也不是无意中创造出来的，但我认为用它来打猎松鼠是不合理的。 - Achtung

@Achtung 一种隐喻并不能作为证明。这个CSS的使用回答了他的问题，将其呈现在这里并不过分。 - Mister Jojo

@Mister Jojo 这不是一场科学讨论，我不是在寻求证明，而是在解释。我坚持认为这是过度的，使用! important会破坏可维护代码并且通常被认为是不好的做法。例如MDN所述：

然而，使用!important是不好的做法，应该避免，因为它通过打破样式表中的自然级联使调试更加困难。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity - Achtung

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Achtung · Accepted Answer

基于id的css选择器比基于class的选择器优先级更高。因此，即使id为year的元素具有活动类(active)，它仍将始终具有"display：none"样式。因此，最好不要使用id作为css选择器。

更好的解决方案是：

.select{
  display: none;
}
.select.active{
  display: block;
}

您可以在此处了解有关选择器特异性的更多信息。

下面是一个显示此内容的代码片段：

function btnFunction(identifier){
    console.log(identifier)
    var element = document.getElementById(identifier);
    element.classList.toggle("active");
}

.select{
  display: none;
}
.select.active{
  display: block;
}

<html>
<body>
<div class="modal-content-col-6-drop">
  <button onclick="btnFunction('year')" class="drop-btn">sample</button>
</div>

 <div id="year" class="select">
    <ul>
      <li>0 Year</li>
      <li>1 Year</li>
    </ul>
 </div>
 </body>
 </html>