jquery - 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

jQueryclick()只接受一个函数，即触发事件（单击）时调用的函数。如果您尝试在函数之间切换，一种方法是使用 if 语句以及元素的 data 属性：

$('#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);
    }
});

此外，如果您要在指定新样式时包含单位（即顶部：'10px'），则必须在值周围加上引号。但是，在您的情况下，您可以只使用-10and 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

Answer 2

试试这个，你不能在 click 中使用两个函数。

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 语句

演示