点击下拉选项并刷新页面后，如何为dropbtn保留active类？

问题分析 #

你之前的代码错误在于：toggleClass返回的是jQuery对象，而非类的状态，直接把它存入localStorage是无效的——localStorage只能存储字符串类型的数据，无法直接存储对象。要实现刷新后保留类，需要存储类的激活状态（布尔值转字符串），并在页面加载时读取状态恢复类。

正确实现方案 #

结合你已有的下拉文本保存逻辑，整合active类的处理：

1. 页面初始化：恢复文本与active类

// 恢复下拉按钮文本
$(".dropbtn").text(localStorage.getItem("selected") || "Helpful Links");

// 恢复active类：读取localStorage中的状态，存在则添加类
if (localStorage.getItem("dropbtnActive") === "true") {
  $(".dropbtn").addClass("active");
}

2. 下拉按钮点击逻辑（不变）

$(".dropbtn").on("click", function () {
  $(".dropdown-content").toggleClass("open");
});

3. 下拉选项点击逻辑：设置文本+添加active类+保存状态

$(".dropdown-content a").on("click", function () {
  // 更新按钮文本并保存
  const selectedText = $(this).text();
  $(".dropbtn").text(selectedText);
  localStorage.setItem("selected", selectedText);

  // 给按钮添加active类，并将激活状态存入localStorage
  $(".dropbtn").addClass("active");
  localStorage.setItem("dropbtnActive", "true");

  // 关闭下拉菜单
  $(".dropdown-content").removeClass("open");
});

额外说明 #

• 如果需要支持移除active类的场景（比如再次点击选项取消激活），可以将addClass改为toggleClass，同时在保存状态时，判断当前按钮是否有active类：

  $(".dropbtn").toggleClass("active");
  // 保存当前是否有active类的状态
  localStorage.setItem("dropbtnActive", $(".dropbtn").hasClass("active").toString());
  

• localStorage的数据是持久化的，除非用户手动清除浏览器缓存或调用localStorage.removeItem("dropbtnActive")，否则状态会一直保留。

内容的提问来源于stack exchange，提问作者X Daast