Question

我正在为我的会员的userOptions创建af幻灯片面板。它很好地与：

//Login panel, slideUp when clicked <-> slideDown
$('#loginPanel').click(function(){
    $('#userNav').slideToggle('fast');
});

但我希望当您刷新页面或转到网站上的其他页面时，该面板会保持打开状态。如果用户关闭面板，它必须保持关闭状态，直到再次打开等。

这可能吗？

*添加回答*

对于即时“幻灯片”我只是加速了1：

$('#div').slideToggle(1);

和$ .cookie中的其他内容相同。

Answer 1

尝试使用$.cookie()插件设置并记住面板的当前状态，并在页面刷新/更改时相应地加载它。

$(document).ready(function()
{
    // Open / Close Panel According to Cookie //    
    if ($.cookie('panel') == 'open'){    
        $('#userNav').slideDown('fast'); // Show on Page Load / Refresh with Animation
        $('#userNav').show(); // Show on Page Load / Refresh without Animation
    } else {
        $('#userNav').slideUp('fast'); // Hide on Page Load / Refresh with Animation
        $('#userNav').hide(); // Hide on Page Load / Refresh without Animation
    }

    // Toggle Panel and Set Cookie //
    $('#loginPanel').click(function(){        
        $('#userNav').slideToggle('fast', function(){
            if ($(this).is(':hidden')) {
                $.cookie('panel', 'closed');
            } else {
                $.cookie('panel', 'open');
            }
        });
    });
}

编辑：这里有一个小提琴来说明：http://jsfiddle.net/7m7uK/

您可以使用小提琴并刷新页面以查看Cookie是否有效。

我希望这有帮助！

Answer 2

是的，如果用户点击userOption将信息放入cookie中，那么将信息放入cookie中，当您加载页面时，如果userOption处于打开状态，则会在cookie中查看。

Answer 3

你可能不得不使用类似URL哈希的东西，或者更好的是，使用cookie将状态写入浏览器。

以下内容（修改后使用slideToggle）应指向正确的方向：http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/

jQuery - slideToggle保持打开直到关闭

3 个答案: