切换带有添加和删除CSS的按钮

Question

如何使用添加和删除或替换CSS制作切换按钮， 这是我的代码

$(document).ready(function(){

  $("#wrapper").click( function() {
    if ($('.toggle').css({top: '-1000px'})) {
      $('.toggle').css({top: '0px'});
    } else {
      $('.toggle').css({top: '-1000px'})
    }
    // my toggle button is animate hamburger to 'x' button
    $(".icon").toggleClass("close");
  });

})

Answer 1

您的if语句正在设置$('.toggle')位置，但没有得到。您会想要这样的东西：

if ($('.toggle').css('top') === '-1000px') { }

但是您可以使用ternary和一些jQuery chaining进一步简化此操作：

$("#wrapper").on('click', function() {
  $('.toggle').css('top', $('.icon').toggleClass('close').hasClass('close') ? '-1000px' : '0px');
});