jQuery-切换元素并使用Cookie保存

Question

我正在尝试使用jQuery Cookie插件和jQuery切换功能：

每当有人切换#launchpad,我想获取它的当前状态。

例如，如果有人切换了它并使其隐藏了，那么我想提醒它现在已隐藏-反之亦然。

这是我当前的代码：

jQuery的：

$(function(){
            if($.cookie){
                   //By default, if no cookie, just display.
                   $("#launchpad").toggle(!(!!$.cookie("toggle-state")) || $.cookie("toggle-state") === 'true');
            }

            $('#toggle-launchpad').on('click', function(){


                $("#launchpad").toggle(
                    if($(this).is(":visible")){
                        alert("visible!!");
                    }else{
                        alert("not visible");
                    }

                );
                //Save the value to the cookie for 1 day; and cookie domain is whole site, if ignore "path", it will save this cookie for current page only;
                $.cookie("toggle-state", $("#launchpad").is(':visible'), {expires: 1, path:'/'}); 
            });

        });

HTML：

 <div id="launchpad">
            <div id="toggle-launchpad" title="Toggle Launchpad" style="display: ;">
                <i class="fa fa-plus"></i>
            </div>
            </div>

我想我不能在toggle function使用if function toggle function 。 有人能解决我的问题吗？

Answer 1

如果您这样做：

$("#launchpad").toggle(400, function() {
    if($(this).is(":visible")){
        alert("visible!!");
    }else{
        alert("not visible");
    }
});

该代码将在toggle功能完成后执行。 请注意， toggle功能是异步的，因此您的$.cookie调用很可能在div隐藏/显示之前被调用。 尝试：

$("#launchpad").toggle(400, function() {
    $.cookie("toggle-state", $("#launchpad").is(':visible'), {expires: 1, path:'/'});
});

动画将花费的毫秒数（默认）不是400。 请参阅文档 。

编辑：如果您的注释是关于代码的第一部分，我将其写为：

if ($.cookie && $.cookie("toggle-state")) && $.cookie("toggle-state") === 'false') {
     $("#launchpad").hide();
}

假设默认情况下div是可见的（即CSS不隐藏）