如何防止通过单击按钮创建的 div 在重新加载页面时消失？

【问题标题】：How do I prevent a div, which is created by clicking on a button, from disappearing when reloading the page?如何防止通过单击按钮创建的 div 在重新加载页面时消失？
【发布时间】：2014-12-28 15:14:15
【问题描述】：

我正在使用一个按钮向下滑动一个包含注册表单的 div，但是在我重新加载页面（或提交表单）后，该 div 消失了，我必须再次单击该按钮。我希望 div 在重新加载页面后保留。有什么建议吗？

这是我的 jquery 代码：

    <script type="text/javascript">
    $(document).ready(function(){

        $("button#button_register").click(function(){
            $("#register").slideDown('slow');
        });
    });
    </script>

还有按钮：

<button id="button_register">Register! </button>

【问题讨论】：

标签： php jquery html forms

【解决方案1】：

您需要以某种方式保存#register 元素的状态。您可以为此（会话）或简单的 cookie 使用服务器端。

但是在纯 JS 中处理 cookie 有点棘手。假设你可以使用这个很棒的插件：https://github.com/carhartl/jquery-cookie 你可以这样做：

$("button#button_register").click(function(){
    if($("#register")is(':visible')) {
        $("#register").slideUp('slow');
        $.cookie('registerState', 0);
    } else {
        $("#register").slideDown('slow');
        $.cookie('registerState', 1);
    }   
});

...而不是每次加载页面时都需要检查此状态，如下所示：

$(document).ready(function(){
    if($.cookie('registerState') == 1) { 
        $("#register").show(); // or slide down if you want to show an animation every time
    }
});

【讨论】：