jquery 使用CSS更改已使用JavaScript修改过的元素的样式

5tmbdcev 于 2024-01-07 发布在 jQuery

关注(0)|答案(1)|浏览(152)

我有一个“过滤条”，当屏幕有一定的宽度时显示，当屏幕变窄时消失。我已经在我的代码中使用媒体查询实现了这一点，它工作正常。
当屏幕变窄时，会出现一个按钮，用于显示隐藏的栏。我已经用JavaScript实现了这段代码，当我点击它时，栏会显示/隐藏：它可以工作。
我的问题是当我用按钮显示隐藏的栏时（所以窗口很窄），我增加窗口的大小直到达到栏必须显示的宽度，它没有。看起来像是JavaScript强加了栏的样式，所以媒体查询不起作用。如何管理？
我的代码和重要元素如下所示：

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

@media (min-width: 576px) and (max-width: 767px) {
  
 .res-button-filtrer-par {
    display: flex;
    margin-bottom: 2em;
  }
  #container-left-small-screen {
    display: none;
    position: absolute;
    width: 50%;
    top: -130px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* Size M  */
 .res-button-filtrer-par {
    display: none;
  }
  #container-left-small-screen {
    display: inline-block;
  }
}

<button class="res-button-filtrer-par res-button" type="button" onClick="displayHideFiltrerPar();">
    <span>Display filter bar</span>
</button>
<div id="container-left-small-screen">
    Filter bar
</div>

jquery

来源：https://stackoverflow.com/questions/77722225/change-the-style-of-an-element-with-css-whose-style-has-already-been-modified-wi

1条答案

按热度按时间

hmtdttj41#

不要让按钮直接改变样式，而是让它添加和删除一个类hidden。然后你可以让你的CSS不仅依赖于媒体查询，还依赖于那个类，如这个简化的例子所示：

@media (max-width: 767px) {
  #btn {
    display: flex;
    margin-bottom: 2em;
  }
  #container-left-small-screen:not(.hidden) {
    display: inline-block;
  }
  #container-left-small-screen.hidden {
    display: none;
  }
}
@media (min-width: 768px) {
  #btn {
    display: none;
  }
  #container-left-small-screen {
    display: inline-block;
  }
}

个字符
除了使用toggle方法，您还可以使用add来添加类，或使用remove来删除类。

展开查看全部

赞(0）回复(0）举报 2024-01-07

我来回答

jquery 使用CSS更改已使用JavaScript修改过的元素的样式

1条答案

相关问题

热门标签

最新问答