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值，以便更轻松地进行比较。但请注意，只需在所需元素和#bot的显示状态上切换CSS类，即可完全根据需要实现所需的变量。试试这个：

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

Working example

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

1 个答案: