我目前被这个问题困住了：在我的起始页上，我有：

<script>
            window.addEventListener(
                'resize', HideWithResize
            )
</script>

我的JS看起来很糟糕，我知道，但我只是在尝试一些东西：

var HideWithResize = function() {
    if ($(window).width() < 1024) {
        $('.nav__paragraph--news').hide();
        $('.nav__paragraph--abwesend').hide();
        document.querySelector(".dropdown__news").classList.replace("dropdown__news--active", "dropdown__news--inactive");
        document.querySelector(".dropdown__abwesend").classList.replace("dropdown__abwesend--active", "dropdown__abwesend--inactive");
 
    } else if ($(window).width() > 1024 )  {
        $('.nav__paragraph--news').show();
        $('.nav__paragraph--abwesend').show();
        document.querySelector(".dropdown__news").classList.replace("dropdown__news--inactive", "dropdown__news--active");
        document.querySelector(".dropdown__abwesend").classList.replace("dropdown__abwesend--inactive", "dropdown__abwesend--active");
    }
};

假设某人打开一个大小为1500的窗口，并将其缩小到1024以下，它应该隐藏2个段落。当他用下拉箭头打开smaler窗口上的段落并再次收缩窗口（甚至增加到1024）时，它会再次隐藏段落...但我只需要它做一次低于1024的限制...同样的，如果有人将它打开到1024以下，然后将它增加到1024以上，它总是在调整大小后再次显示

另一件事是，当有人打开站点时，低于1024个段落应该被隐藏，直到他打开它们-->然后它们应该保持打开

有什么办法可以解决吗？

提前道谢！