Question

代码：

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

我知道我不能.toggle，因为为了恢复margin-left，我必须包含原始值（300px）。

将上述事件转换为切换的最简单方法是什么？

Answer 1

您可以使用.toggle()显示隐藏元素，并使用.toggleClass()切换类，并将css margin left设置为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}

在课堂上使用此链接定义宽度。它的工作原理

如何将以下`.click`变为切换？

2 个答案: