JqueryからJavaScriptへの置き換えで分からない箇所がある

Question

前提

Jqueryで書かれている、多階層のハンバーガーメニューをJsに書き換える練習をしています。
途中までは、上手くいったのですがいくつかの点で躓きました。
１aタグから見た親要素の取得（荒業ですが、クラスを別にして回避しています）
2.toggleなどのclassを取得し、追加または削除する部分のやり方がイマイチ摘めません。

実現したいこと

Jsに書き換えられなかった箇所を、書き換えて正しく動作させたい。

該当のソースコード

      <div class="hamburger__btn"><span></span><span></span><span></span></div>
      <nav class="nav not--svh">
        <div class="nav__list--scroll">
          <ul class="nav__list">
            <li class="nav__item"><a href="index.html">HOME</a></li>
            <li class="has-child nav__item js1"><a href="#">menu1</a>
              <ul class="nav__item-child">
                <li class="nav__item-child--item"><a href="/Publish/tm/index.html">内容</a></li>
              </ul>
            </li>
            <li class="has-child nav__item js2"><a href="#">menu2</a>
              <ul class="nav__item-child">
                <li class="nav__item-child--item"><a href="/Publish/mm/index.html">介</a></li>
              </ul>
            </li>
            <li class="has-child nav__item js3"><a href="#">menu3</a>
              <ul class="nav__item-child">
                <li class="nav__item-child--item"><a href="/Publish/campus/index.html">キャンパス</a></li>
              </ul>
            </li>
            <li class="nav__item"><a href="/Publish/question.html">よくある質問</a></li>
          </ul>
        </div>
      </nav>

function mediaQueriesWin() {
  var width = $(window).width();
  if (width <= 1025) {
    $(".has-child>a").off('click');	
    $(".has-child>a").on('click', function () {
      var parentElem = $(this).parent();
      $(parentElem).toggleClass('active');
      $(parentElem).children('ul').stop().slideToggle(500);
      return false;
    });
  } else {
    $(".has-child>a").off('click');
    $(".has-child>a").removeClass('active');
    $('.has-child').children('ul').css("display", "");

  }
}

window.addEventListener('load', function () {
  const width = window.innerWidth;
  if (width <= 900) {
    document.querySelector(".has-child>a").onclick = function () {
      funcList.forEach(function (pair) {
        pair.el.removeEventListener('click', pair.clickFunc, false);
      });
    }

    // $(".has-child>a").off('click');	//has-childクラスがついたaタグのonイベントを複数登録を避ける為offにして一旦初期状態へ
    document.querySelector('.js1>a').addEventListener('click', function () {
      const parentElem1 = document.querySelectorAll('.js1');
      parentElem1.classList.toggle("active")
      // $(parentElem1).toggleClass('active');
      $(parentElem1).children('ul').stop().slideToggle(500);//liの子要素のスライドを開閉させる※数字が大きくなるほどゆっくり開く
    },
    false);


    document.querySelector('.js2>a').addEventListener('click', function () {
      const parentElem2 = document.querySelectorAll('.js2');
      // var parentElem = $(this).parent();// aタグから見た親要素の<li>を取得し
      $(parentElem2).toggleClass('active');//矢印方向を変えるためのクラス名を付与して
      $(parentElem2).children('ul').stop().slideToggle(500);//liの子要素のスライドを開閉させる※数字が大きくなるほどゆっくり開く
    }, 
    false);


    document.querySelector('.js3>a').addEventListener('click', function () {
      const parentElem3 = document.querySelectorAll('.js3');
      // var parentElem = $(this).parent();// aタグから見た親要素の<li>を取得し
      $(parentElem3).toggleClass('active');//矢印方向を変えるためのクラス名を付与して
      $(parentElem3).children('ul').stop().slideToggle(500);//liの子要素のスライドを開閉させる※数字が大きくなるほどゆっくり開く
    }, 
    false);
  } else {//横幅が960px以上の場合
    $(".has-child>a").off('click');//has-childクラスがついたaタグのonイベントをoff(無効)にし
    $(".has-child>a").removeClass('active');//activeクラスを削除
    $('.has-child').children('ul').css("display", "");//スライドトグルで動作したdisplayも無効化にする
  }
});

Answer 1

１aタグから見た親要素の取得（荒業ですが、クラスを別にして回避しています）

この場合 this.parentNode でいいでしょう。

2.toggleなどのclassを取得し、追加または削除する部分のやり方がイマイチ摘めません。

既にできているように、.classList のメソッドでやればいいと思います。

slideToggle() の置き換えはシンプルではないので、時間があれば後で追記します。

---

slideToggle() は jQuery でも数百行のコードで実現しているぐらい面倒な処理です。限られた場面だけの対応(margin/border/padding なしなど)でよいなら、以下のようなコードで実現できます。

async function slideToggle(e, duration) {
  const display = getComputedStyle(e).display;
  if (display == 'none') {
    e.style.display = '';
    e.style.overflow = 'hidden';
    let targetHeight = e.scrollHeight;
    let a = e.animate([{height:'0px'}, {height:targetHeight+'px'}], duration);
    a.play();
    await a.finished;
    e.style.height = '';
    e.style.overflow = '';
  } else {
    e.style.overflow = 'hidden';
    let targetHeight = e.scrollHeight;
    let a = e.animate([{height:targetHeight+'px'}, {height:'0px'}], duration);
    a.play();
    await a.finished;
    e.style.display = 'none';
    e.style.overflow = '';
  }
}