Question

我正在尝试设置一个JavaScript + JQuery来改变某些元素的位置，如果浏览器窗口在任一方向上调整超过一定宽度（800px）。

有三种状态：

浏览器宽度＆gt; 800px，菜单打开
浏览器宽度＆lt; = 800px，菜单已关闭
浏览器宽度＆lt; = 800px，菜单打开

菜单打开/关闭操作由浏览器宽度超过800px时隐藏的div的onClick事件处理（#menushow和#menuhide）。

我需要的是重置为状态1的菜单选项是将浏览器的大小调整为800px以上，如果浏览器的大小调整为800px以下，则调整状态。

菜单元素由＆lt; nav id =“access”＆gt;元素和装饰＆lt; div id =“sibebar-bottom”＆gt;元件。

我目前的代码是：

window.onresize = function(event) {  
if ( $(window).width() > 800){ 
    document.getElementById('menushow').style.display = "none";
    document.getElementById('menuhide').style.display = "none";
    $( "#sidebar-bottom" ).removeClass('closemenu')
    $( "#sidebar-bottom" ).addClass('openmenu')
    $( "#sidebar-bottom" ).animate({top: "570px"}, 300, 'easeOutExpo')
    $( "#access" ).animate({top: "0px"}, 300, 'easeOutExpo')  
} 
if ( $(window).width() <= 800 ){ 
    document.getElementById('menushow').style.display = "block";
    document.getElementById('menuhide').style.display = "none";
    $( "#sidebar-bottom" ).removeClass('closemenu')
    $( "#sidebar-bottom" ).addClass('openmenu')
    $( "#sidebar-bottom" ).animate({top: "103px"}, 300, 'easeOutExpo')
    $( "#access" ).animate({top: "-477px"}, 300, 'easeOutExpo')  
} 

}

然而，当我将窗口从> 800px调整为更小时，没有任何动作。如果我从＆lt; 800px调整到＆gt; 800px，我会得到一个隐藏的动画循环并重复显示菜单。

Answer 1

你的第二个if语句的条件大于或等于800，我认为应该小于或等于800.

当窗口调整大小低于/高于设定宽度时，提示不同的Javascript / JQuery

1 个答案: