JQuery 弹出窗口不起作用。

Question

你好只是想问问为什么我的 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/

请帮忙。

Answer 1

jQuery 的 click() 只接受一个函数，即触发事件(点击)时调用的函数。如果您尝试在函数之间切换，一种方法是使用 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')，则必须在值两边加上引号。但是，在您的情况下，您可以只使用 -10 和 50，因为如果您没有指定，jQuery 会自动假定您在谈论像素。

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