(Javascript) Div toggle and cookies

本文关键字：and cookies toggle Div Javascript 更新时间：2023-09-26

我想使用一个按钮。feattoggle来切换div#featuredout，我想让浏览器通过cookie来记住是否应该隐藏或显示div#featuredout。如果可能的话，我希望它是这样的，如果#featuredout是隐藏的，. feattoggle应该有一个额外的类"hidden"，如果#featuredout是显示的，. feattoggle应该有一个额外的类"显示"。

我非常非常没有经验的Javascript，所以任何帮助将是伟大的。

这是我当前的代码:

$(document).ready(function() {
    // When the toggle button is clicked:
  $('.featToggle').click(function() {
  $('#featuredout').slideToggle(550);
    var featuredoutC = $.cookie('featuredout');
    if (featuredoutC == null) {$.cookie('featuredout', 'expanded');};
    else if (featuredoutC == 'expanded') {$.cookie('featuredout', 'collapsed');};
  });
});
// COOKIES
    // state
    var featuredout = $.cookie('featuredout');
    // Set the user's selection for the left column
    if (featuredout == 'collapsed') {
        $('#featuredout').css("display","none");
        $.cookie('featuredout', 'collapsed');
    };
});

类似的代码应该可以运行

$(function() {
    $('.featToggle').click( function() {
        $('#featuredout').slideToggle(550);
        $.cookie('featuredout',$('#featuredout').is(':visible'););
    });
    var vis = $.cookie('featuredout');
    if(vis) {
        $('.featToggle').removeClass('hidden').addClass('shown');
    } else {
        $('#featuredout').hide();
        $('.featToggle').removeClass('shown').addClass('hidden');
    }
});