动态设置display:none无效，语言选择菜单显隐异常求助

你的核心问题出在行内样式优先级覆盖CSS类，以及**display: none无法配合opacity动画**这两点上，以下是具体修复方案：

问题根源 #

1. 你在JS中直接设置了lang_container.style.display = "block"，行内样式的优先级远高于CSS类，导致后续toggle('_hidden')时，display: none根本无法生效。
2. display: none的元素会被完全移出文档流，无法触发opacity渐变动画，所以你的手动逐帧动画从一开始就无法正常工作。

修复代码 #

1. 重构CSS（用过渡动画替代display切换） #

放弃display: none，改用visibility和opacity实现渐变显示/隐藏，同时保留元素布局空间（避免页面跳变）：

/* 默认隐藏状态 */
.lang-container {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* 保留你原有的布局样式，比如position、padding等 */
}

/* 显示状态类 */
.lang-container._visible {
    visibility: visible;
    opacity: 1;
}

2. 修改HTML（初始化无需隐藏类） #

<div class="header__lang-container _flex-column-center nav__item-container">
    <a href="" class="nav__simple-link header__lang _is-active-simple-link">eng</a>
    <ul class="lang-container">
        <li><a href="" class="lang-container__eng lang-container__item">eng</a></li>
        <li><a href="" class="lang-container__ukr lang-container__item">ukr</a></li>
    </ul>
</div>

3. 简化JS逻辑（用CSS过渡替代手动逐帧动画） #

const lang_switcher = document.querySelector('.header__lang');
const lang_container = document.querySelector('.lang-container');
let isSwitcherOpen = false;

lang_switcher.addEventListener('click', (e) => {
    e.preventDefault();
    lang_switcher.classList.toggle('_is-active-simple-link');
    
    if (!isSwitcherOpen) {
        // 显示菜单：添加可见类，触发CSS过渡
        lang_container.classList.add('_visible');
    } else {
        // 隐藏菜单：移除可见类，触发渐变消失
        lang_container.classList.remove('_visible');
    }
    
    isSwitcherOpen = !isSwitcherOpen;
});

额外说明 #

如果需要隐藏时彻底移除元素的布局空间，可以在过渡结束后补充设置display: none（需监听过渡结束事件），但一般情况下visibility的方案已经足够满足需求，且不会导致页面布局跳变。

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