Question

我正在尝试通过单击相同的单词来显示和消失菜单。我刚开始学习这些语言。但我认为我正在取得一些进展。在这里和其他在线阅读了很多内容之后，我想出了这个：

var main = function() {

if($('.menu').css('top') == '-65px') {    
    $('.icon-menu').click(function() {
        $('.menu').animate({top: '10px'}, 400);
        $('.content').animate({top: '10px'}, 400);
    });
}

else {
    $('.icon-menu').click(function() {
        $('.menu').animate({top: '-65px'}, 400);
        $('.content').animate({top: '-65px'}, 400);
    });
}  
};

$(document).ready(main);

到目前为止，我可以让菜单显示但不会消失。

谁能帮帮我？

Answer 1

您只检查菜单的状态一次，而不是每次点击。把东西翻出来：

var main = function() {
  $('.icon-menu').click(function() {

    if ($('.menu').css('top') == '-65px') {    
      $('.menu').animate({top: '10px'}, 400);
      $('.content').animate({top: '10px'}, 400);
    } 
    else {
      $('.menu').animate({top: '-65px'}, 400);
      $('.content').animate({top: '-65px'}, 400);
    }
  });
};

Answer 2

您正在检查绑定事件时菜单的位置，因此将始终存在一个或另一个将被绑定的事件处理程序，并且在处理事件时它不会发生变化。

改为使用一个事件处理程序，并在事件发生时检查位置：

$('.icon-menu').click(function() {
  if($('.menu').css('top') == '-65px') {    
    $('.menu').animate({top: '10px'}, 400);
    $('.content').animate({top: '10px'}, 400);
  } else {
    $('.menu').animate({top: '-65px'}, 400);
    $('.content').animate({top: '-65px'}, 400);
  }
});

if语句卡在其他地方

2 个答案: