Jquery Toggle Cookies 不工作

Question

所以我制作了我的 jquery 切换 cookie 脚本，但它不起作用。就像，当我点击触发器时，什么也没有发生。

基本上，这段代码的作用是如果内容被隐藏，我们添加一个 cookie 来记住它被隐藏的状态。当用户再次切换时，我们将删除该 cookie。另外，我怎样才能通过 cookie 保持 V 形的状态？

jQuery(document).ready(function ($) {
if ($.cookie('t4hidden')) {
    $('#top4hide').hide();
}
$("#top4trigger").click(function () {
    $("i",this).toggleClass("fa fa-chevron-up fa fa-chevron-down")
    $("#top4hide").toggle("blind");
});
$("#top4trigger").click(function() {
    if ($("#top4hide").is(":hidden")) {
    $.cookie("t4hidden", "foo");
} else {
    $.removeCookie("t4hidden");
}
});

jsfiddle：http://jsfiddle.net/P2dy8/

Answer 1

这里的根本问题是时机。您的代码中有两个单击回调：一个用于切换元素的显示，另一个用于设置 cookie。你无法控制哪个先运行，但即使你能控制也无济于事。第一个回调用动画隐藏元素，所以当第二个回调触发时元素仍然可见。您对$('#top4hide").is(":hidden") 的检查总是返回false，因为无论它何时运行——第一次或第二次——它当时仍然可见。

幸运的是，you can pass a second parameter to jQuery's toggle() - 一个在动画完成时运行的函数。通过在动画后检查元素的可见性，我们可以正确设置 cookie 值。我已经发布了一些working code over on JSFiddle，以及以下内容；如果设置了 cookie，它还会在页面加载时隐藏 div 时切换您的 V 形。 （您需要加载 jQuery cookie plugin 才能获得 $.cookie() 和 $.removeCookie()。）

$(function() { // $() is an alternative syntax for $(document).ready()
    if ($.cookie('t4hidden')) { // Update page if cookie is set
        $('#top4hide').hide();
        $('#top4trigger i').toggleClass('fa-chevron-up fa-chevron-down');
    }

    $("#top4trigger").click(function() { // Click handler for link
        $("i", this).toggleClass("fa-chevron-up fa-chevron-down")
        $("#top4hide").toggle("blind", function () { // Set/delete cookie after animation complete
            if ($("#top4hide").is(":hidden")) {
                $.cookie("t4hidden", "foo");
            } else {
                $.removeCookie("t4hidden");
            }
        });
    });
});