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语句和元素的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'），则必须在值周围加上引号。但是，在您的情况下，您可以使用-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

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

DEMO

JQuery弹出不会工作。

2 个答案: