jQuery切換文本更改和隱藏元素

Question

嘗試在用戶單擊按鈕時創建一個簡單的函數，它將顯示一個表單並更改該按鈕上的文本。當他們再次點擊它時，窗體隱藏和按鈕文本將變回原來的樣子。

這是我到目前爲止有：

$('a.subscribe').click(function() { 
var link = $(this); 
$('.intro_cta form').toggle(function(){ 
    if ($(this).is(':visible')) { 
     $('a.enter').css('display','none'); 
     link.text('CLOSE'); 

    } else { 
     link.text('SUBSCRIBE'); 
     $('a.enter').css('display','block'); 
    }  
}); 
}); 

和HTML標記：

<a href="#" class="subscribe button white">SUBSCRIBE</a> 
    <form class="subscribe_form"> 
     <input type="text" placeholder="EMAIL"/> 
     <input type="submit" value="JOIN" /> 

    </form> 
    <a href="<?php echo site_url(); ?>/home" class="enter button green">ENTER</a> 

當用戶點擊訂閱按鈕，它應該顯示形式和隱藏ENTER鍵和將訂閱按鈕上的文本更改爲「CLOSE」。當再次按下按鈕時會發生相反的情況。

這樣做的工作，但切換使表單滑動 - 我只是想讓它顯示或隱藏。

Answer 1

你可以使用 .fadeToggle() 顯示/隱藏沒有幻燈片效果。 See here for documentation

Answer 2

檢查這個簡單的代碼沒有切換。

var check=false; 
 
$("form").hide(); 
 
$("a.enter").hide(); 
 
$('a.subscribe').click(function() { 
 
    if(check==false){ 
 
     check=true; 
 
     $(this).text('CLOSE'); 
 
     
 
     
 
     $("form").show(); 
 
     $("a.enter").show(); 
 
    }else{ 
 
     check=false; 
 
     $(this).text('SUBSCRIBE'); 
 
     $("form").hide(); 
 
     $("a.enter").hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="subscribe button white">SUBSCRIBE</a> 
 
    <form class="subscribe_form"> 
 
     <input type="text" placeholder="EMAIL"/> 
 
     <input type="submit" value="JOIN" /> 
 

 
    </form> 
 
    <a href="<?php echo site_url(); ?>/home" class="enter button green">ENTER</a>