屏幕尺寸超出阈值后，已展开的响应式导航栏无法恢复正常的问题

问题根源：你通过JavaScript直接给<ul>设置了内联样式display:block，当屏幕宽度超过813px时，CSS媒体查询中.navList ul {display:flex}的优先级低于内联样式，因此无法覆盖，导致导航保持展开状态。

方案一：用CSS类控制显示（推荐） #

这种方式遵循CSS与JS分离的原则，更易维护。

1. 更新CSS代码 #

添加控制导航展开的类，并在大屏媒体查询中强制重置布局：

/* 新增：控制导航展开的类 */
.navList ul.active {
    display: block;
}

/* 新增：大屏状态下强制恢复导航布局 */
@media (min-width: 814px) {
    .navList ul {
        display: flex !important; /* 覆盖内联样式或类样式 */
    }
}

2. 修改JavaScript代码 #

将直接修改CSS的逻辑改为添加/移除类：

$(".navDropdown").on("click", function () {
    $(".navList ul").toggleClass("active");
});

方案二：监听窗口resize事件动态恢复 #

通过监听窗口尺寸变化，主动重置导航布局：

修改JavaScript代码 #

$(".navDropdown").on("click", function () {
    var x = $(".navList ul").css("display");
    $(".navList ul").css("display", x === "none" ? "block" : "none");
});

// 监听窗口尺寸变化
$(window).resize(function() {
    if ($(window).width() > 813) {
        $(".navList ul").css("display", "flex");
    }
});

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