Javascript 将div更改为调整窗口大小时的相同位置

在响应菜单栏上，当页面小于1120px时，我有关闭和打开菜单。当我点击主导航的接近宽度时，转到0像素。 并且在调整页面大小时没有达到以前的大小。 html和css代码如下所示

。主导航李a{
颜色：黑色；
字体大小：15px；
字体系列：无衬线；
}
.主导航。单击此处a{
字体大小：粗体；
颜色：红色；
}
标题a img{
填充：10px；
}
.开放导航{
显示：无；
}
.主导航{
宽度：80%；
}
@仅介质屏幕和（最大宽度：1100px）{
.主导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
顶部：5px；
右-0%；
背景色：#111；
溢出x：隐藏；
过渡：.5s；
}
.主导航li.关闭导航{
颜色：白色；
宽度：250px；
文本对齐：右对齐；
右边填充：40px；
边缘顶部：10px；
游标：默认值；
}
.主导航李a{
宽度：220px；
颜色：小麦；
}
.开放导航{
显示：块；
位置：固定；
左：91.3%；
前-1%；
}
}

血脉
函数openNav（）{
document.getElementById（“主导航”）.style.width=“250px”；
}
函数closeNav（）{
document.getElementById（“主导航”）.style.width=“0px”；
}
☰


☰

您可以使用jQuery，并使用resize函数检查浏览器是否低于1120px，类似于

$(document).ready(function(){
            $(window).on("load resize",function(e){
                docWidth = $( document ).width();
                if(docWidth >= 1120) {
                    $( "#primary-nav").removeClass("mobile").addClass("desktop"); //set some CSS to 'desktop' class which controls desktop style
                }
                else {
                    $( "#primary-nav").removeClass("desktop").addClass("mobile"); //set some CSS to 'mobile' class which controls mobile style
                }
            });
        });

---

您还可以看看使用$（window.width（），我认为由于加载时间的原因，它实际上更受欢迎。我在本例中使用了$（document）.width（），因为控制台的宽度加起来更好，而且在回答的上下文中更容易阅读/理解它在做什么（或者，我认为是这样）。