Ändern Sie die Klasse der Dropdown-Schaltfläche, nachdem Sie auf das Dropdown-Element geklickt haben, und laden Sie die Seite neu

Question

Ich versuche, die Klasse eines Dropdown-Schaltflächenelements zu ändern, nachdem der Benutzer auf ein Element im Dropdown-Menü geklickt und die Seite neu geladen hat.

Der folgende Code ist gültig, wenn die Seite aktualisiert wird.

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

Gibt es lokale Speicheroptionen, die ich verwenden kann? Ich habe gerade davon erfahren.

Ich verwende derzeit den folgenden Code, um den Text aufzurufen, der in der Dropdown-Schaltfläche angezeigt wird:

$(".dropbtn").text(
localStorage.getItem("selected")
? localStorage.getItem("selected")
: "Hilfreiche 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");
});

Vielen Dank an @RedApple für die Hilfe. Es funktioniert einwandfrei – ich frage mich nur, ob die .dropbtn-Klasse auf ähnliche Weise auf aktiv gesetzt werden könnte, wenn auf das A-Element .dropdown-content geklickt wird.

Ich habe es versucht, aber ich glaube, ich verwende es nicht richtig, weil .dropbtn die aktive Klasse bei der Seitenaktualisierung nicht beibehält:

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