javascript - 单击时如何使对象再次最小化

Question

我有一个小表单，当用户访问我的网页时它会展开，然后在几秒钟后最小化。然后，当单击该按钮时，它会再次展开。我一直在尝试添加代码以允许它在再次单击按钮时最小化，但我一直在破坏它。我是 jquery 的初学者，有人可以帮忙吗？

fiddle :http://jsfiddle.net/ambersabre/vkfos3yn/

html:

<div id="fixed-form">

    <div style="width: 100%; height: 43px">
        <div id="btnclick" class="contactbtn" />
        <div style="padding-top: 12px; font-size: 14px; padding-left: 26px; color: #fff; font-weight: bold; text-transform: uppercase">send us an email</div>
    </div>
</div>
<div class="content" id="testdiv">

    <div style="margin: 0  auto; width: 340px; height: 130px; padding-top: 5px">

    <div style="padding-top: 10px">
        <div style="float: left; width: 165px; height: 37px">
            <input type="text" class="float-input" name="contactName" id="contactName" value="" class="txt requiredField" placeholder="EMAIL ADDRESS:" />
        </div>

        <button name="float-submit" type="submit" class="float-submit" style="margin-top: 8px; margin-left: 10px" value="float-submit" />Submit</button>
    </div>
</div>

CSS:

#fixed-form {
    position: fixed; z-index: 1;
    right: 5px;
    bottom: 0;
    width: 400px;
}
.content {
    background-color: grey;
    padding: 10px;
    width: 400px; height: 180px;
    font-family:Lato; color: #fff; font-weight: bold; border: 2px solid grey;
    font-size:14.5px; position: relative; z-index: 1; border-radius: 10px 0 0 0;
}
.contactbtn {
    width: 192px; position: relative; z-index: 1; float: right;
    height: 43px; background: grey;
}
.float-input {
    width: 100%; height: 100%; border: none; background: #46A2A2;background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
}

脚本:

$(document).ready(function () {
    $(function () {
        setTimeout(function () {
            $("#testdiv").slideToggle(1500);
        }, 5000)
        $('#btnclick').click(function () {
            $('#testdiv').show();
            setTimeout(function () {
                $("").slideToggle(1500);
            }, 5000)
        })
    })
})

Answer 1

当你使用 .slideToggle() 时再次使用它而不是 .show()

setTimeout(function () {
    $("#testdiv").slideToggle(1500);
}, 5000)

$('#btnclick').click(function () {
    $('#testdiv').slideToggle();
});

DEMO