2

ブラウザー ウィンドウがいずれかの方向に特定の幅 (800px) を超えてサイズ変更された場合に、一部の要素の位置を変更するように JavaScript + JQuery を設定しようとしています。

次の 3 つの状態があります。

  1. ブラウザ幅 > 800px、メニューを開く
  2. ブラウザの幅 <= 800px、メニューを閉じる
  3. ブラウザ幅 <= 800px、メニューを開く

メニューの開閉操作は、ブラウザの幅が 800px を超えると非表示になる div (#menushow と #menuhide) の onClick イベントによって処理されます。

メニュー オプションを状態 1 にリセットするには、ブラウザーの幅が 800 ピクセルを超えるように変更され、ブラウザーの幅が 800 ピクセル未満に変更される場合は状態 2 にリセットする必要があります。

メニュー要素は < nav id="access" > 要素と装飾的な < div id="sibebar-bottom" > 要素で構成されます。

現時点で持っているコードは次のとおりです。

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 から小さいサイズに変更しても、何も動きません。<800px から >800px にサイズ変更すると、メニューの表示と非表示を繰り返すアニメーション ループが発生します。

4

1 に答える 1

0

あなたの 2 番目の if ステートメントには800以上の条件がありますが、それは 800以下であるはずだと思います。

于 2012-08-03T15:48:43.150 に答える