Question

我很想知道是否有人可以告诉我为什么这不起作用？

$(function() {
    $("#header").click(function() {
        if ($(".menuBody").css('width') == 0) {
            $(".menuBody").delay(0).animate({"width": "350"}, 500);
        }
        else if ($(".menuBody").css('width') == 350){
            $(".menuBody").delay(400).animate({"width": "0"}, 500);};
        });
});

Answer 1

.css('width')不等于数字。它等于一个字符串。请改用.width()。

$(function() { 
  $("#header").click(function() {
    if ($(".menuBody").width() == 0) { 
      $(".menuBody").delay(0).animate({"width": "350"}, 500); 
    } 
    else if ($(".menuBody").width() == 350){ 
      $(".menuBody").delay(400).animate({"width": "0"}, 500);
    }
  }); 
});

此处有更多信息：http://api.jquery.com/width/

Answer 2

尝试使用此代码来解决您的问题：

$(function() {
  $("#header").on('click', function() {
    if ($(".menuBody").width() == 0) {
      $(".menuBody").delay(0).animate({"width": "350px"}, 500);
    }
    else if ($(".menuBody").width() == 350){
      $(".menuBody").delay(400).animate({"width": "0"}, 500);
    }
  });
});

修改使用.width()代替.css('width');

Answer 3

没有太多可以继续，但也许是因为在第4行和第6行中你的宽度是一个字符串：“350”而不是整数：350

JavaScript if-else条件改变CSS宽度

3 个答案: