2

I'm trying to set up a JavaScript + JQuery to change some elements' positions if the browser window is resized past a certain width (800px) in either direction.

There are three states:

  1. Browser width > 800px, menu open
  2. Browser width <= 800px, menu closed
  3. Browser width <= 800px, menu open

The menu Open/Close operation is handled by an onClick event for divs that are hidden when the browser width exceeds 800px (#menushow and #menuhide).

What I need is for the menu options to reset to State 1 is the browser is resized to above 800px in width, and State 2 if the browser is resized to below 800px in width.

The menu elements consist of a < nav id="access" > element, and the decorative < div id="sibebar-bottom" > element.

The code I have at the moment is this:

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')  
} 

}

However, when I resize the window from >800px to smaller, nothing moves. And if I resize from <800px to >800px, I get an animation loop that hides and shows the menu repeatedly.

4

1 回答 1

0

您的第二个 if 语句的条件大于或等于 800，我假设它应该小于或等于 800。

于 2012-08-03T15:48:43.150 回答