在 Jquery 函数中编写 If 和 If Else 的更好方法

Question

我确信这块代码可以压缩成更简单和高效的东西。 然而，我很难过。 如果有人可以帮助我，那将不胜感激！

var close = "true";

$(document).on('click', '[data-toggle-nav]', function(event) {


  if ($(this) && close === "true") {
    console.log('close');
    $('#top').css('transform', 'rotate(45deg)').css('top', '10px');

    $('#mid').css('transform', 'rotate(-45deg)').css('top', '10px');

    $('#bot').css('display', 'none');
    close = "false";
  } 

  else if ($(this) && close === "false") {
     console.log('open');
    $('#top').css('transform', 'rotate(0deg)').css('top', '0px');

    $('#mid').css('transform', 'rotate(0deg)').css('top', '10px');

    $('#bot').css('display', 'block');

    close = "true";
  }

});

Answer 1

首先close应该是一个boolean值，以使比较更容易。 但是请注意，您可以通过简单地切换所需元素上的 CSS 类和#bot的显示状态来#bot所需的内容，而根本不需要该变量。 尝试这个：

#top {
    top: 0;
}
#top.open { 
    transform: rotate(45deg);
    top: 10px;  
}
#mid.open { 
    transform: rotate(-45deg);
    top: 10px; 
}

$(document).on('click', '[data-toggle-nav]', function(event) {
    $('#top, #mid').toggleClass('open');
    $('#bot').toggle();
});

工作示例