0

こんにちは、私の JS がここで機能しない理由を知りたいだけです

$('#toggle').click( 
   function() {
      $('#popout').animate({ top: -10px }, 'slow', function() {
          $('#toggle').html('Close');
      });
  }, 
  function() {
      $('#popout').animate({ top: 50 }, 'slow', function() {
        $('#toggle').html('Show');
      });
   }
);

メニューを表示しようとしています: http://jsfiddle.net/N4ZHd/2/

助けてください。

4

2 に答える 2

2

jQueryclick()は 1 つの関数しか取りません。それは、イベント (クリック) がトリガーされたときに呼び出されるものです。関数を交互に使用する場合、1 つの方法は要素の data プロパティと共に if ステートメントを使用することです。

$('#toggle').click(function() {
    if(!$('#popout').data('open')){
        $('#popout').animate({ top: '-10px' }, 'slow', function() {
            $('#toggle').html('Close');
        }).data('open', true);
    } else {
        $('#popout').animate({ top: '50px' }, 'slow', function() {
            $('#toggle').html('Show');
        }).data('open', false);
    }
});

また、新しいスタイル (つまり、top: '10px') を指定するときに単位を含める場合は、値を引用符で囲む必要があります。ただし、指定していない場合、jQueryはピクセルについて話していると自動的に想定するため、あなたの場合は-10andを使用するだけです。50

JSFiddle

また、三項演算子を使用してコードを短縮したい場合:

$('#toggle').click(function() {
    isOpen = $('#popout').data('open');
    $('#popout').animate({ top: isOpen ? '50px' : '-10px' }, 'slow', function() {
        $('#toggle').html(isOpen ? 'Close' : 'Open');
    }).data('open', isOpen ? false : true);
});

JSFiddle

于 2013-11-14T13:25:39.803 に答える
1

これを試してみてください。クリックで2つの機能を使用することはできません。

var toggle = false;
$('#toggle').click(function () {
    toggle = !toggle
    $('#popout').animate({
        top: (toggle == true ? "-10px" : "50")
    }, 'slow', function () {
        $('#toggle').html((toggle == true ? "close" : "Show"));
    });
});

bool 変数を使用し、if ステートメントを使用する

デモ

于 2013-11-14T13:28:34.470 に答える