Question

我有一个我一直在处理幻灯片输入/输出面板的脚本，作为最后一块我已经合并了jQuery Cookie，我不确定我做得不错但是当我在本地测试它时工作正常但是，当我重新加载/刷新页面时，面板加载扩展然后快速关闭，我怎样才能让cookie在页面加载时保持关闭状态。 Fiddle

$(function () {
if ($.cookie('myCookieName')) {
    $('#slideClick').click();
}
});

$('#slideClick').click(function () {
var it = $(this).data('it') || 1;
switch (it) {
    case 1:
        $(this).parent().animate({ right: '-345px' }, { queue: false, duration: 500 });
        $(".slideClose").addClass('hideBtn');
        $(".slideOpen").removeClass('hideBtn');
        break;
    case 2:
        $(this).parent().animate({ right: '-0px' }, { queue: false, duration: 500 });
        $(".slideOpen").addClass('hideBtn');
        $(".slideClose").removeClass('hideBtn');
        break;
}
it++;
if (it > 2) it = 1;
$(this).data('it', it);
$.cookie('myCookieName', '1')
});

由于

Answer 1

OnLoad，你必须首先设置div的位置，以便隐藏它。然后在onClick事件中，你必须反转你的开关案例，它应该工作。请参阅 Fiddle 。

  $(function() {
        $('#slideOut').css('right','-345px');        
        if ($.cookie('myCookieName')) {
          $('#slideClick').click();
        }
  });

  $('#slideClick').click(function() {
      var it = $(this).data('it') || 1;
      switch (it) {
        case 2:
          $(this).parent().animate({
            right: '-345px'
          }, {
            queue: false,
           duration: 500
          });
          $(".slideClose").addClass('hideBtn');
          $(".slideOpen").removeClass('hideBtn');
          break;
        case 1:
          $(this).parent().animate({
            right: '0px'
          }, {
            queue: false,
            duration: 500
          });
          $(".slideOpen").addClass('hideBtn');
          $(".slideClose").removeClass('hideBtn');
          break;
      }
      it++;
      if (it > 2) it = 1;
      $(this).data('it', it);
      $.cookie('myCookieName', '1')
  });

注意：移除-0px上的 - 。

Answer 2

通过调用$（＆＃39;＃slideClick＆＃39;）。点击（），您可以将其设置为动画，这需要0.5秒。相反，您可能希望通过执行以下操作立即隐藏面板：

$(function () {
    if ($.cookie('myCookieName')) {
        $('#slideOut').css('right','-345px');
    }
});

Answer 3

如果您想避免闪现无格式内容，请考虑将属性right: -345px;添加到CSS选择器#slideOut。这样人们在jQuery加载并调用click()方法之前不会在瞬间看到它。

jQuery - 侧面板使用cookie跳转页面加载

3 个答案: