javascriptのコードの意味を知りたい

Question

下記のコードの意味を教えて頂きたいです。
よろしくお願いします。イタリックテキスト

let navToggle = document.querySelector(".nav__toggle");
let navWrapper = document.querySelector(".nav__wrapper");

navToggle.addEventListener("click", function () {
  if (navWrapper.classList.contains("active")) {
    this.setAttribute("aria-expanded", "false");
    this.setAttribute("aria-label", "menu");
    navWrapper.classList.remove("active");
  } else {
    navWrapper.classList.add("active");
    this.setAttribute("aria-label", "close menu");
    this.setAttribute("aria-expanded", "true");
  }
});

Comments

[m.ts10806]

コードの出典を明示してください。
意味を知ってどうしたいのか記載してください。
理解するためにやったこと、現在の理解度がわかる情報を提示してください。

[miyabi_pudding]

出典元に説明が記載されてないのでしょうか？

Answer 1

nav__toggleというクラスのついた最初のHTML要素のnavToggle、
nav__wrapperというクラスのついた最初のHTML要素のnavWrapperとしたとき

navToggleをクリックしたらnavWrapperにactiveというクラスがついていたら
navToggleのaria-expanded属性にfalse、aria-label属性にmenuを設定し
navWrapperのクラスからactiveを外す。
そうでないなら
navWrapperにactiveをつけて
navToggleのaria-label属性に「close menu」、aria-expanded属性にtrueを設定

Answer 2

下記のコードの意味

.nav__toggleをクリックすると、.nav__wrapperが展開されたり閉じたりするコードです。

document.querySelector(".nav__toggle")などで要素を取得し、
navToggle.addEventListener("click", でクリックしたときのイベントリスナを設定します。
イベントリスナ内では、.activeがあるかどうかで分岐して、aria-label aria-expandedを変更し、.activeの状態を反転させています。

以上で、お分かりになりましたか？

Answer 3

詳しくは
javascriptでナビゲーションメニューバーを作る方法（基本編）
に記載されています。