Javascript 如果语句被其他语句卡住

我试图通过点击同一个单词来显示和消失一个菜单。 我刚开始学习这些语言。但我想我正在取得一些进展。 在阅读了大量关于此处和其他在线资源后，我发现：

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);

到目前为止，我能够使菜单出现，但不会消失

---

谁能帮助我？

您只需检查一次菜单的状态，而不是每次单击。把事情翻过来：

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);
    }
  });
};

---

您只需检查一次菜单的状态，而不是每次单击。把事情翻过来：

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);
    }
  });
};

---

您在绑定事件时正在检查菜单的位置，因此始终会有一个或另一个事件处理程序被绑定，并且在处理事件时它不会更改

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

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

---

您在绑定事件时正在检查菜单的位置，因此始终会有一个或另一个事件处理程序被绑定，并且在处理事件时它不会更改

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

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

---

请将您的HTML和CSS添加到问题中。请将您的HTML和CSS添加到问题中。使用

.click（）

是有问题的，因为如果在DOM操作中修改了目标，它不会持续存在-您应该养成使用

.on（'click'，…）

的习惯。True（尽管

.on（）

如果目标不被修改，那么成本将是不必要的）。不管怎样，都与眼前的问题无关。叶，看到这样的情况，我理解为什么它不起作用。非常感谢：）！是的，虽然不是很贵，我想我会给OP一个指针，当他遇到问题时（他会）。正如你所说，与手头的问题无关，这就是我投票的原因：）使用

。click（）

是有问题的，因为如果在DOM操作中修改目标，它不会持续存在-你应该养成使用

。on（'click'，…）

的习惯。True（尽管

.on（）

如果目标不被修改，那么成本将是不必要的）。不管怎样，都与眼前的问题无关。叶，看到这样的情况，我理解为什么它不起作用。非常感谢：）！是的，虽然不是很贵，我想我会给OP一个指针，当他遇到问题时（他会）。正如你所说，与手头的问题无关，这就是为什么我投了赞成票：）