时间戳

首页 > 解决方案 > 类列表切换不会为 div 添加/切换类名

javascript - 类列表切换不会为 div 添加/切换类名

问题描述

我的目标是每次按下按钮时显示一个列表，有点像下拉列表，所以我制作了一种测试 html、css 和 js 文件，但不知何故它不起作用，我的 js 代码中的 log 函数输出这个词控制台上的“年份”，但类列表切换似乎没有更改/添加 div 类上的“活动”。

下面是我的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;
}

标签： javascripthtmldom

解决方案

基于 id 的 css 选择器优先于基于类的选择器。display: none因此，即使课程处于活动状态，id 年份也将始终存在。因此，最好的解决方案是不要将 ids 用于 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>

推荐阅读