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>

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

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

Answer 1

你可以使用 .fadeToggle() 对于 show/hide 没有那个幻灯片效果。 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>

jQuery 切换文本更改和隐藏元素

jQuery toggle text change and hide elements

javascript

css

jquery

toggle