JS控制HTML下拉菜单显示时原有CSS样式失效问题求解

问题根源 #

你在CSS中给#car-brand-dropdown设置的布局模式是display: flex，而JS触发显示时直接把该元素的内联样式display改成了block，内联样式优先级高于外部CSS规则，直接覆盖了原本的flex属性，导致依赖flex的justify-content: space-around等布局规则全部失效，才会出现样式错乱的表现，并非CSS没有加载。

修复方案 #

方案1：直接修改JS逻辑（最快修复） #

把JS中显示下拉菜单的赋值语句从block改成flex即可，对应修改后的代码：

var carListDropdown = document.getElementById("car-brand-dropdown")
carListDropdown.style.display = "none";

function carListDrop(){
    if(carListDropdown.style.display === "none"){
        carListDropdown.style.display = "flex";
    } else {
        carListDropdown.style.display = "none";
    }
}

方案2：用类名切换控制显隐（更规范，推荐） #

避免直接修改内联样式，通过切换控制显隐的专用类实现，不会破坏原有的样式规则：

1. 先在CSS中新增显隐控制类：

.hidden {
  display: none !important;
}

2. 修改JS逻辑为切换类名：

var carListDropdown = document.getElementById("car-brand-dropdown")
// 初始默认隐藏
carListDropdown.classList.add('hidden')

function carListDrop(){
    carListDropdown.classList.toggle('hidden')
}

这种方式后续如果修改下拉菜单的display属性，不需要再同步调整JS代码，维护性更好。

内容的提问来源于stack exchange，提问作者PMConcepcion