jQuery 将toggleClass 保存在cookie 或localStorage 中

2023-12-04

我正在尝试保存 cookie 或使用localStorage(以更好的为准)记住访问者何时单击加号按钮来显示/隐藏 div。任何人都可以协助使下面的代码与 cookie 一起使用或localStorage?

$('.plus').on('click', function(e) {
    $(".plus .icon .two").toggleClass('horizontal');
    $(".welcome-section").toggleClass('open');
    $(".welcome-header p").toggleClass('explore');
});

我更喜欢使用本地存储:

JavaScript:

var $content = $('.js-content');

if (localStorage.getItem('isVisible') === 'true') {
    $content.addClass('content_visible');
}

$('.js-button').on('click', function() {
    $content.toggleClass('content_visible');
    localStorage.setItem('isVisible', $content.hasClass('content_visible'));
});

CSS:

.content {
    display: none;
}

    .content_visible {
        display: block;
    }

HTML:

<button type="button" class="js-button">+</button>
<div class="content js-content">This is content</div>

JSFiddle

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery 将toggleClass 保存在cookie 或localStorage 中 的相关文章

随机推荐

  • 当充气器与 ApplicationContext 一起使用时,不应用主题/样式

    我的主题将 TextView 的 textColor 指定为红色 我正在使用 LayoutInflater 实例化 TextView 问题是 当使用 ApplicationContext 创建 inflater 时 样式不会应用于 Text
  • 从串口读取到Excel

    我需要在 Excel 中创建一个按钮来从串行端口读取数据 我无法将任何额外的文件附加到 Excel 工作表上 我需要将此 Excel 文件传输到另一台计算机才能读取此数据 该文件的功能如下 按 按钮选择串行端口 然后 按另一个按钮将数据从串
  • R 中的 gsub 除外

    我正在从希伯来语文本中删除英文字符 但想保留我想要的英文单词的简短列表 例如words2keep lt c ok hello yes 所以我当前的正则表达式是text lt gsub A Z a z text 但问题是如何添加例外 这样它就
  • 如何在React Native中将字符串转换为jsx

    我正在尝试将 javascript 字符串显示为 jsx 似乎无法在 React Native 中将字符串显示为 jsx 例如const test
  • BST构建树双指针

    我不确定如何设置指向指针的指针来构建树 就像一旦我到达叶子并调用 insert 一样 我应该如何插入另一个使用根节点或根指针的地址调用 insert 的元素 我认为这个函数的问题是名称 root 它应该是双指针 对吗 include bst
  • 如何挂钩 __usercall、__userpurge (__spoils) 函数?

    知道任何人有关挂钩的事情 usercall函数类型 我挂钩成功 thiscall stdcall and cdecl打电话但这对我来说就足够了 知道有人挂钩图书馆 usercall或如何使用翻译来挂钩此类函数 stdcall or cdec
  • 从 TFS 自定义活动运行命令行语句

    我想运行一个命令来从 TFS 自定义活动执行 subversion 命令 我应该创建一个 msbuild 脚本来执行 svn 命令并从活动中调用 msbuild 吗 谢谢 任何人 您还可以将 InvokeProcess 活动添加到构建流程模
  • 为什么 Swift 中函数调用需要参数名称?

    我在课堂上有这个函数 func multiply factor1 Int factor2 Int gt Int return factor1 factor2 我尝试使用以下方法调用该函数 var multResult calculator
  • 如何检测 Python 类中重复的方法名称?

    在编写单元测试时 我有时会剪切并粘贴测试 但不记得更改方法名称 这会导致覆盖之前的测试 有效地隐藏它并阻止它运行 例如 class WidgetTestCase unittest TestCase def test foo should d
  • 将 ValidateAntiForgeryToken 与 Ajax.ActionLink 结合使用

    当请求来自 Ajax ActionLink 使用 Http Method Post 时 是否可以在控制器操作上使用 ValidateAntiForgeryToken 属性 另一种方法似乎是手动滚动 JQuery Ajax 请求 但我很好奇
  • 如何编写一个随windows启动自动启动的python程序?

    我正在使用 python 2 6 和 pyqt4 编写一个程序 我希望这个程序在 Windows 启动时自动启动 类似于 uTorrent 客户端 我该如何进行这项工作 我使用的是Windows 7 您只需在 Windows 开始菜单的 启
  • PHP 使用 Cookie 将当前会话 ID 存储在数据库中

    我创建了一个使用 cookie 并将会话 ID 存储在数据库中的登录系统 因此您的登录只能使用该特定会话 ID 我意识到这有几个问题 如果您在另一台设备上登录 会话 ID 会发生变化 不可多次登录 会话 ID 实际上是唯一标识用户已登录的内
  • 如何防止论坛类应用程序中出现垃圾邮件?

    对于网络应用程序 除了验证码之外 还有其他方法吗 Pastie org or p ramaz net 就我的口味而言 验证码对于小糊状物来说花费的时间太长了 你可以尝试蜜罐验证码 本质上 您可以使用 CSS 隐藏一些表单字段 您的用户永远不
  • System.in方法指定的键盘在哪里?

    我无法从概念上理解下面的代码 从键盘检索字符并打印到命令行 中我指定输入必须来自键盘的位置 public class Adder public static void main String arr Explain this next li
  • 无法将参数传递给 @selector 方法?

    我目前正在尝试使用标题为 X 的 UIButton 作为从视图中删除 Sprite 的方法 基本上 我的代码的工作原理是 当触摸精灵时 一条消息会发送到传递已选择的 Sprite 精灵的委托 视图控制器 在此方法中 我在该精灵之上绘制一个
  • Jquery 可选择范围选择(滑块行为)

    我想用值列表和选择范围的选项替换滑块 我关注了 jquery selectable 文章 它提供了一个很好的多选选项 http jqueryui com demos selectable display grid 由于我只需要范围选择 因此
  • 如何允许缺少 .d.ts 类型定义的模块?

    我正在使用一些不受欢迎的模块 例如Dyo and js sha3似乎没有任何类型 我现在并不真正关心第三方库中的类型 我不想花几个小时来输入这些类型 我主要将它用于服务器 以限制我的错误并在开发过程中更轻松地进行故障排除 I had a C
  • 从 JSONObjects 的 JSONArray 中删除除一个元素之外的所有元素

    我有一个像这样的 JSONArray org json a a b a c a d a e a f a g a 我想删除所有JSONObjects that do not有钥匙a 除了我幼稚的方法之外 还有更好的方法吗 Iterator o
  • Eclipse C++ 多个项目通用文件

    在 Eclipse CDT 中 我希望有几个 C 项目 projA projB projC 等 其中都包含一些 c cpp and or h来自公共目录的文件 这是我现有的文件结构 Workspace gt projA gt src gt
  • jQuery 将toggleClass 保存在cookie 或localStorage 中

    我正在尝试保存 cookie 或使用localStorage 以更好的为准 记住访问者何时单击加号按钮来显示 隐藏 div 任何人都可以协助使下面的代码与 cookie 一起使用或localStorage plus on click fun