响应式导航菜单接入JS切换逻辑后大屏端无法正常显示问题

1. 样式优先级问题：通过JS直接给元素设置style.opacity属于内联样式，CSS优先级远高于媒体查询中定义的类选择器样式，小屏操作后内联的opacity:0会一直生效，就算放大窗口触发大屏媒体查询，类选择器设置的opacity:1也无法覆盖内联样式，导致菜单持续隐藏。
2. 语法错误：提供的CSS代码中，第一个250px-750px的媒体查询结束后没有写闭合大括号，属于语法错误，也可能导致部分样式规则不生效。

第一步：修正CSS语法，改用状态类控制显隐（推荐） #

不要直接用JS操作内联样式，通过新增状态类的方式控制显隐，同时明确大屏下的样式优先级：

/* 补充第一个媒体查询的闭合大括号，新增状态类规则 */
@media (min-width: 250px) and (max-width: 750px){
    .headernav ul li {
        width: 100%;
        display: block;
        background-color: hsl(3, 43%, 56%);
        opacity: 0;
        transition: .5s;
    }
    /* 小屏下生效的隐藏类 */
    .headernav ul li.nav-hidden {
        opacity: 0;
    }
}

@media (min-width: 751px){
    .headernav ul li{
        opacity: 1 !important; /* 大屏下强制显示，覆盖所有小屏显隐设置 */
    }
}

第二步：修改JS逻辑，切换类名替代修改内联样式 #

let toggledNavMenu = false;

function toggleMenu(){
    const getLi = document.querySelectorAll(".headernav ul li");
    const liSize = getLi.length;  

    if(!toggledNavMenu){
        for (let i = 0; i < liSize; i++) {
            getLi[i].classList.add('nav-hidden');
        }
        toggledNavMenu = true;
    } else {
        for (let i = 0; i < liSize; i++) {
            getLi[i].classList.remove('nav-hidden');
        }
        toggledNavMenu = false;
    }
}

第三步：可选补充窗口resize监听兜底 #

如果需要彻底避免状态异常，可以新增窗口大小变化监听，大屏下自动重置菜单状态：

window.addEventListener('resize', () => {
  if(window.innerWidth >= 751) {
    const getLi = document.querySelectorAll(".headernav ul li");
    getLi.forEach(item => {
      item.classList.remove('nav-hidden');
    })
    toggledNavMenu = false;
  }
})

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