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

工作示例