如何将以下“.click”转换为切换

How to turn the following `.click` into a toggle?

本文关键字：转换 click      更新时间：2023-09-26

代码：

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

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

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

您可以使用.toggle()来显示隐藏元素，并使用.toggleClass()来切换类，css边距左设置为0:

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

CSS:

.marginzero{
   margin-left:0;
}

    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}

使用此链接定义类中的宽度。它工作于

相关文章：