如何將以下`.click`轉換為切換？

Question

編碼：

  $('.ask-button').click(function() {
    $('.wpcf7-form').hide()
    $(this).css('margin-left', 0)
  })

我知道我不能只做.toggle因為要恢復margin-left我必須包括原始值（ 300px ）。

將以上事件轉換為切換的最簡單方法是什么？

Answer 1

您可以使用.toggle()顯示隱藏的元素，並使用.toggleClass()來切換類，同時將css margin設置為0：

$('.ask-button').click(function() {
  $('.wpcf7-form').toggle()
  $(this).toggleClass('marginzero');
});

CSS：

.marginzero{
   margin-left:0;
}

Answer 2

    HTML
   <button class="ask-button">ask</button>
<div class="wpcf7-form">Sample text<div>
    js
  $('.ask-button').click(function() {
    $('.wpcf7-form').toggleClass('wpcf8-form')
  })
    css
   .wpcf7-form{ margin-left:300px; border:1px solid #ddd}
.wpcf8-form{ margin-left:0; border:1px solid #ddd}

使用此鏈接定義類的寬度。 有用