ドロップダウン項目をクリックした後、ドロップダウン ボタンのクラスを変更し、ページをリロードします。

Question

ユーザーがドロップダウン メニューの項目をクリックしてページをリロードした後、ドロップダウン ボタン項目のクラスを変更しようとしています。

次のコードはページが更新されたときに有効です。

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

使用できるローカル ストレージ オプションはありますか?それについて今知りました。

現在、次のコードを使用して、ドロップダウン ボタンに表示されるテキストを呼び出しています。

$(".dropbtn").text(
localStorage.getItem("選択済み")
? localStorage.getItem("選択済み")
： "便利なリンク"
);
$(".dropbtn").on("クリック", function () {
$(".dropdown-content").toggleClass("open");
});
$(".dropdown-content a").on("click", function () {
$(".dropbtn").text($(this).text());
localStorage.setItem("選択済み", $(this).text());
$(".dropdown-content").removeClass("open");
});

@RedApple のご協力に感謝いたします。それは問題なく動作します。ただ、.dropdown-content a-item がクリックされたときに、同様の方法で .dropbtn クラスをアクティブに設定できるかどうか疑問に思っています。

これを試してみましたが、.dropbtn はページ更新時にアクティブなクラスを保持しないため、正しく使用していないと思います:

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

Answer 1

これでうまくいくはずです...

リーリー