點擊下拉項後更改下拉按鈕的類，並重新載入頁面

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");
});