jquery 添加类显示 block 和无

Question

大家好，任何人都可以在我的代码中帮助我。

$(document).ready(function() {
     var circle = $('.circle');
     $(".send a").click(function(e) {
      e.preventDefault();
     $('.wrap').css('display', 'block');

        if (circle.hasClass('bounceInLeft')) {
         circle.removeClass('bounceInLeft').addClass('bounceOutRight');

          }
           else 
          {

         $('.circle').addClass('animated bounceOutRight');
         circle.removeClass('bounceOutRight').addClass('bounceInLeft');
           }

      });

  });

当您点击 .send a 时，.wrap 将 display:block 。我如何添加第二次点击 .send a 然后 .wrap 将 display none？我知道它应该是这样的:

$('.wrap').css('display', 'none'); 但是我不知道在哪里可以写这段代码...

.wrap {
  max-width: 400px;
  margin: 4em auto;
  text-align: center;
  display:none;
  background-color:#fff;
}

Answer 1

您可以使用 .toggle() 在每次点击时切换元素的可见性。

$(".send a").on('click', function(e) {
    $('.wrap').toggle();
    // ..
});

或者，最好使用 .toggleClass()，并添加/删除一个类，例如 .hide:

.hide {
    display: none; /* You may wish to increase the specificity.. */
}

$(".send a").on('click', function(e) {
    $('.wrap').toggleClass('hide');
    // ..
});

如果您坚持手动添加/删除内联 CSS，您只需要使用如下条件语句:

$('.wrap').is(':hidden') ? $('.wrap').show() : $('.wrap').hide();