JS控制筛选栏显隐后CSS媒体查询失效的解决办法咨询

你的问题根源是JavaScript添加的内联display样式优先级高于CSS媒体查询规则，导致窗口放大后媒体查询的显示设置无法生效。下面是几种实用的解决方法，按推荐程度排序：

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

放弃直接操作内联样式，改用CSS类来切换筛选栏的显隐，利用选择器优先级让媒体查询规则在大屏下覆盖类样式。

修改步骤： #

1. 添加全局隐藏类，并调整媒体查询规则：

/* 全局定义隐藏类 */
.hidden {
  display: none;
}

@media (min-width: 576px) and (max-width: 767px) {
 .res-button-filtrer-par {
    display: flex;
    margin-bottom: 2em;
  }

  #container-left-small-screen {
    display: inline-block; /* 窄屏下默认显示 */
    position: absolute;
    width: 50%;
    top: -130px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
 .res-button-filtrer-par {
    display: none;
  }

  #container-left-small-screen {
    display: inline-block; /* ID选择器优先级高于.hidden类，自动覆盖隐藏状态 */
  }
}

2. 修改JavaScript函数，通过切换类来控制显隐：

function displayHideFiltrerPar() {
    const filterBar = document.getElementById('container-left-small-screen');
    filterBar.classList.toggle('hidden');
}

原理： #

大屏下媒体查询使用#container-left-small-screen（ID选择器）设置display: inline-block，优先级高于.hidden类选择器，因此不管之前是否添加了hidden类，大屏都会强制显示筛选栏。

方案二：监听窗口resize事件清除内联样式 #

如果不想修改CSS结构，可通过监听窗口大小变化，在窗口宽度达到大屏阈值时清除内联的display样式，让媒体查询规则生效。

修改JavaScript代码： #

function displayHideFiltrerPar() {
    const filterBar = document.getElementById('container-left-small-screen');
    if (filterBar.style.display === "none" || filterBar.style.display === "") {
        filterBar.style.display = "inline-block";
    } else {
        filterBar.style.display = "none";
    }
}

// 防抖函数避免resize频繁触发
function debounce(func, delay = 200) {
    let timeout;
    return () => {
        clearTimeout(timeout);
        timeout = setTimeout(func, delay);
    };
}

// 窗口大小变化时处理
window.addEventListener('resize', debounce(() => {
    const filterBar = document.getElementById('container-left-small-screen');
    if (window.innerWidth >= 768) {
        filterBar.style.removeProperty('display'); // 清除内联样式
    }
}));

原理： #

当窗口宽度≥768px时，移除内联的display属性，此时媒体查询的display: inline-block会自动生效。

方案三：用!important强制媒体查询生效（不推荐） #

在媒体查询的显示规则后添加!important，强制覆盖内联样式，但这种方式会破坏样式优先级逻辑，不利于后续维护。

修改CSS： #

@media (min-width: 768px) and (max-width: 991px) {
 .res-button-filtrer-par {
    display: none;
  }

  #container-left-small-screen {
    display: inline-block !important;
  }
}

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