我的目标是在每次按下按钮时显示一个列表，就像一个下拉列表，所以我做了一个测试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;
}
基于id的css选择器优先于基于类的css选择器。 因此id year将始终为display:none，即使该类处于活动状态。 因此，最好的解决方案是不对css选择器使用ID。
更好的解决办法是
.select{
display: none;
}
.select.active{
display: block;
}
您可以在这里阅读关于选择器特异性的更多信息。
我将在这里包括一个片段来说明这一点:
null
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>
您需要在css中添加！重要
null
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>