0

私はデザイナーですが、HTML/CSS 以外のコーディングはあまり得意ではありません。私は Javascript をほとんど理解していませんが、通常は簡単なアニメーションと基本的な機能の jQuery スクリプトをうまくコピーすることができます。ただし、この場合、どこかでつまずいていて、どこにあるのかわかりません。

このスクリプトは、「#showNav」ボタンがクリックされたときに、「#left-sidebar」要素の「left」プロパティを 0 から -250px の間で切り替えることを目的としています。

$(document).ready(function(){
var navPos = $('#left-sidebar').position().left;
$('#showNav').click(function(){
    if(navPos = -250){
        $('#left-sidebar').animate({
            left: '0px'
        }, 500);
    } else {
        $('#left-sidebar').animate({
            left: '-250px'
        }, 500);
    }
});
});

if/then ステートメントを記述して、要素が既に -250 になっているかどうかを確認し、それに応じて反対の値に切り替えることができると考えました。現在、ボタンをクリックすると #left-sidebar が -250 から 0 に移動しますが、もう一度ボタンをクリックすると、期待どおりに -250 に戻りません。これはかなり簡単な修正だと思いますが、どこから始めればよいかさえわかりません...

4

2 に答える 2

1

コードデモ

$(function(){ // a bit shorter DOM ready

    $('#showNav').click(function(){
        var navPos = $('#left-sidebar').position().left;       
        $('#left-sidebar').stop().animate({left: navPos===-250 ? 0 : -250}, 500);
    });

});
  • クリックすると位置を取得し、
  • 次のように言う単純な三項演算子を使用します。
is navPos === -250            ?
if YES (animate left to 0   ) :
if NO  (animate left to -250) ;
于 2012-11-08T01:46:15.183 に答える
1

var navPos = $('#left-sidebar').position().left;クリック ハンドラー内に移動すると、機能します。

現在、割り当てているのnavPosは 1 回だけです。したがってnavPos、クリックの頻度に関係なく、常に初期値が保持されます。

したがって、必要なのは、ユーザーが#showNavdiv をクリックしたときの位置です。

これは、完全な更新されたコードです。

$(document).ready(function(){
  $('#showNav').click(function(){
    var navPos = $('#left-sidebar').position().left; 

    if(navPos == -250){
      $('#left-sidebar').animate({left: '0px'}, 500);
    } else {
      $('#left-sidebar').animate({left: '-250px'}, 500);
    }
  });
});
于 2012-11-08T01:39:28.920 に答える