我正在为我的成员的userOptions创建af幻灯片面板.它运作良好:
- //Login panel,slideUp when clicked <-> slideDown
- $('#loginPanel').click(function(){
- $('#userNav').slideToggle('fast');
- });
但是当我刷新页面或转到网站上的另一个页面时,我希望面板保持打开状态.如果用户关闭面板,它必须保持关闭状态,直到再次打开等.
这可能吗?
*加入答案*
对于即时“幻灯片”我只是加速1:
- $('#div').slideToggle(1);
和$.cookie中的其他相同.
解决方法
尝试使用
$.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的工作情况.
我希望这有帮助!