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>

我想我无法在if function内使用toggle function。有没有人能解决我的问题？

Answer 1

如果你这样做：

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

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

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

不是400是动画将以ms为单位的（默认）时间。请参阅the documentation。

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

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

这假设div默认是可见的（即没有被CSS隐藏）

jQuery - 切换元素并用cookie保存

1 个答案: