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

Question

代碼：

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

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

將上述事件轉換爲切換的最簡單方法是什麼？

Answer 1

您可以使用.toggle()顯示隱藏的元素，並使用.toggleClass()用於切換類CSS距左設置爲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} 

使用本鏈接在類中定義寬度。它的工作