JS アコーディオンメニュー カレントのクラス名を付与した部分を開く

Question

前回の質問【特定要素に特定クラスがついている場合のみチェックボックスにcheckedを付与したい】からの派生です。
チェックボックスでアコーディンを開閉を制御していましたが、今後メニュー項目の増加でinputとlabelの記述が多くなるという理由からjsに変えました。

やりたいこと

・クラス名currentが付与された場合、該当のアコーディオンをアコーディオン展開にする

新html

<nav class="collapsibleNav">
  <div class="collapsibleNav__wrap">
    <ul class="mainNav">
      <li class="mainNav__item">
        <a href="#" class="mainNav__item__link is-toggle-accNav">メニュー1（クリックで開く）</a>
        <ul class="mainNavKids">
            <li class="mainNavKids__item"><a href="./test.html" class="mainNav__item__link">サブメニュー1</a></li>
            <li class="mainNavKids__item"><a href="#" class="mainNav__item__link">サブメニュー1</a></li>
            <li class="mainNavKids__item"><a href="#" class="mainNav__item__link">サブメニュー1</a></li>
        </ul>
      </li>
      <li class="mainNav__item">
        <span class="is-toggle-accNav">メニュー2（クリックで開く）</span>
        <ul class="mainNavKids">
            <li class="mainNavKids__item"><a href="#" class="mainNav__item__link">サブメニュー1</a></li>
            <li class="mainNavKids__item"><a href="#" class="mainNav__item__link">サブメニュー1</a></li>
        </ul>
      </li>
      <li class="mainNav__item">
        <a href="#" class="">メニュー1（クリックで開く）</a>
      </li>
    </ul>
  </div>
</nav>
〜略〜
<script>
$(function(){
  $(".is-toggle-accNav").on("click", function() {
    $(this).next().slideToggle(500);
  });
});

//current
$(function(){
  $('.mainNav__item__link').each(function(){
    var $href = $(this).attr('href');
    if(location.href.match($href)) {
      $(this).parent().addClass('current');
      $(this).parent().parent().parent().addClass('current');
    } else {
      $(this).parent().removeClass('current');
    }
  });
});

//current-open
$(function(){
  $('.acc-subOpen', $('.mainNav__current').closest('.mainNav__item')).prop('checked', true).trigger('change');
});
</script>

完成イメージ

現在もしくは遷移時のページを子メニュー1とし、ロード時にメニュー1と子メニュー1にcurrentが付与され、メニュー1のアコーディオンが展開されている。

〜略〜
<ul class="mainNav">
  <li class="mainNav__item current">
    <span class="mainNav__toggleAcc js-mainNav__toggleAcc">メニュー1</span>
    <ul class="mainNavKids">
        <li class="mainNavKids__item current"><a href="">サブメニュー1</a></li>
        <li class="mainNavKids__item"><a href="">サブメニュー1</a></li>
        <li class="mainNavKids__item"><a href="">サブメニュー1</a></li>
    </ul>
〜略〜

Answer 1

ちょっと状況がわかりませんが

$(function(){
  $('.mainNav__item>span').on('click',function(){
    $(this).next('.mainNavKids').toggle();
  });
});

Comments

[yambejp]

クラスで処理するならtoggleをtoggleClassにして適当な
クラスを指定してあげてください

[crigw]

JSで制御しているアコーディンオンメニューに対して表示中ページの現在位置を取得し該当するメニュー親子ともにクラス名を付与してかつアコーディオンを開いた状態にしたいです。（画像参照）
アコーディオンの開閉をinputタグで制御していた時にはこの実装ができたのですが、jsに変えた時にどうしたらいいかわからず質問した次第です。

[crigw]

クラス名付与はできました、残りはクラス名を付与したアコーディオンを展開する処理だけになります。

[yambejp]

> クラス名を付与したアコーディオンを展開

それは単純にCSSを設定しておけばよいのでは？

[crigw]

確かに…最初から展開するという問題は解決いたしました。
ただ、この方法だとクリック時に閉じることができません…

[yambejp]

> クリック時に閉じる

デフォルトを閉じるcssにして、クラスつけて表示するなら
クラスをはずすとか・・・

[crigw]

なるほど、それでやってみます！
いろいろアドバイスいただきありがとうございました！