点击下拉项后更改下拉按钮的类，并重新加载页面

Question

我试图在用户点击下拉菜单中的项目并重新加载页面后，更改下拉按钮项的类。

以下代码在页面刷新时有效。

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

是否有我可以使用的本地存储选项？我刚刚了解到它。

我目前正在使用以下代码来调用出现在下拉按钮中的文本：

$(".dropbtn").text(
localStorage.getItem("selected") 
? localStorage.getItem("selected")
: "Helpful Links"
);
$(".dropbtn").on("click", function () {
$(".dropdown-content").toggleClass("open");
});
$(".dropdown-content a").on("click", function () {
$(".dropbtn").text($(this).text());
localStorage.setItem("selected", $(this).text());
$(".dropdown-content").removeClass("open");
});

非常感谢@RedApple的帮助。它运行良好 - 只是想知道当点击.dropdown-content a项时，是否可以以类似的方式将.dropbtn类设置为active。

我尝试了这个，但我认为我没有正确使用它，因为.dropbtn在页面刷新时没有保留active类：

$(".dropdown-content").on("click", function() {
localStorage.setItem("active", $('.dropbtn').toggleClass('active'));
 $('.dropbtn').toggleClass('active');
});

Answer 1

我认为这应该可以工作...

let isBtnClicked = localStorage.getItem("isBtnClicked")
? localStorage.getItem("isBtnClicked")
: false;
$(".dropbtn").addClass(
isBtnClicked
? "hovered" // 在这里填入您点击按钮的类名
: ""
);
$(".dropbtn").text(
localStorage.getItem("selected")
? localStorage.getItem("selected")
: "Helpful Links"
);
$(".dropbtn").on("click", function () {
$(".dropdown-content").toggleClass("open");
isBtnClicked = !isBtnClicked;
localStorage.setItem("isBtnClicked", isBtnClicked);
});
$(".dropdown-content a").on("click", function () {
$(".dropbtn").text($(this).text());
localStorage.setItem("selected", $(this).text());
$(".dropdown-content").removeClass("open");
});