javascript - jquery SlideUp/slideDown cookie

Question

我的网站上有一个打开的 div，一条欢迎消息，其中有一个 slideUp/slideDown 切换开关，因此用户可以单击“关闭”，然后它会向上滑动该分区。但是，每次您登陆此页面时，它都会打开...并且我想对此应用一个 cookie，因此如果用户按下 slideUp 切换按钮，它会添加一个 cookie 并将其保持在 显示:无。

这是到目前为止我的 jQuery 代码...我希望使用 cookie哪个插件可以让事情变得更容易？

var welcome_active = false;
$('.welcome-container .trigger span').click(function() {
    if (!welcome_active) {
        $('.welcome-container .content').slideUp('slow', function() {});
        $(this).find('span').removeClass('ss-navigatedown');
        $(this).find('em').html('About');
        $(this).find('span').addClass('ss-navigateup');
        welcome_active = true;
        console.log('test');
    } else {
        $('.welcome-container .content').slideDown('slow', function() {});
        $(this).find('span').removeClass('ss-navigateup');
        $(this).find('em').html('Close');
        $(this).find('span').addClass('ss-navigatedown');
        welcome_active = false;
    }
});

如果这可能的话有什么想法吗？

谢谢

Answer 1

应该是这样的，使用您提到的cookie插件，但如果您不必支持旧版浏览器，您也可以使用本地存储:

var welcome_active = false;
if($.cookie('welcome_active')=='1'){
  $('.welcome-container .content').slideUp('slow', function() {});
  $(this).find('span').removeClass('ss-navigatedown');
  $(this).find('em').html('About');
  $(this).find('span').addClass('ss-navigateup');
  welcome_active = true;
}
$('.welcome-container .trigger span').click(function() {
  if (!welcome_active) {
    $('.welcome-container .content').slideUp('slow', function() {});
    $(this).find('span').removeClass('ss-navigatedown');
    $(this).find('em').html('About');
    $(this).find('span').addClass('ss-navigateup');
    welcome_active = true;
    console.log('test');
    $.cookie('welcome_active', '1', { expires: 7 });
  } else {
    $('.welcome-container .content').slideDown('slow', function() {});
    $(this).find('span').removeClass('ss-navigateup');
    $(this).find('em').html('Close');
    $(this).find('span').addClass('ss-navigatedown');
    welcome_active = false;
    $.cookie('welcome_active', '0', { expires: 7 });
  }
});