javascript - 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>

当用户点击 SUBSCRIBE 按钮时，它应该显示表单并隐藏 ENTER BUTTON 并将订阅按钮上的文本更改为“CLOSE”。再次按下按钮时应该发生相反的情况。

这确实有点工作，但是切换使表单滑入 - 我只是想让它显示或隐藏。

Answer 1

你可以使用.fadeToggle()用于显示/隐藏没有幻灯片效果。 See here for documentation