Slide Toggle 開閉時の動作制御の条件分岐が分からない

Question

Slide Togggle の動作制御をしたい

Slide Toggle でモバイル端末のアコーディオンメニューを作っています。
階層構造は第一階層と第二階層だけです。
Toggleメニュー起動時には第一階層だけが確認でき、クリック操作で展開します。
メニューを展開していない（第二階層を開かない）ときは第一階層に Font Awesome の<i class="fas fa-plus"></i>
のプラス（＋）マークが表示されていて、メニューを展開したときは<i class="fas fa-minus"></i>マイナス（－）マークが表示させるのが希望です。

また一つ開くと他は閉じるようにしています。
動作の条件分岐が考慮不足で意図した動きをしてくれません。Font Awesomeの切り替え表示ができません。

お忙しいところ恐縮ですが何かしらヒントをいただけますと大変ありがたいです。
どうぞよろしくお願いいたします。

発生している問題・エラーメッセージ

一つ開くと他のメニューを閉じるのですがその際に
Font Awesomeの切り替えのために条件分岐が考慮不足
Font Awesomeがプラスになるところでマイナスになる。

該当のソースコード

<script>
$(function () {
  $('.ac-parent').on('click', function () {
    $(this).next().slideToggle();
    //openクラスをつける
    $(this).toggleClass("open");
    $(this).find('i').toggleClass('fa-plus fa-2x fa-minus fa-2x')
    //クリックされていないac-parentのopenクラスを取る
    $('.ac-parent').not($(this)).removeClass('open');
    $('.ac-parent').not(this).removeClass('fa-minus fa-2x');

    // 一つ開くと他は閉じるように
    $('.ac-parent').not($(this)).next('.ac-child').slideUp();
  });
  $('.ac-parent').blur(function(){
    $(this).find('i').toggleClass('fa-plus fa-2x fa-minus fa-2x')
  });
});
</script>

<ul>
    <li class="ac">
    <a href="*" class="ac-parent">A<span class="icon--toggle"><i class="fas fa-plus"></i></span></a>
        <ul class="ac-child">
                            <li><a href="*">A-1</a></li>
        </ul>
    </li><li class="ac">
    <a href="*" class="ac-parent">B<span class="icon--toggle"><i class="fas fa-plus"></i></span></a>
        <ul class="ac-child">
                            <li><a href="*">B-1</a></li>
        </ul>
    </li><li class="ac">
    <a href="*" class="ac-parent">C<span class="icon--toggle"><i class="fas fa-plus"></i></span></a>
        <ul class="ac-child">
                            <li><a href="*">C-1</a></li>
        </ul>
    </li>
</ul>

試したこと

記述が分からないのでお手上げ状態です。

補足情報（FW/ツールのバージョンなど）

WAI-ARIA　の書き方はまだ分からないので、タブ操作でメニュー展開は切り替わりません。

Comments

[yambejp]

jQueryでしょうか？タグ付けしてください
親カテゴリがアンカー(a)だとクリックで展開せずにリンクに飛びそうな気がしますが
飛ばないほうがよいのですよね？（イベントを殺す？）

Answer 1

こんな感じで

$(function(){
  $('.ac-child').hide();
  $('.ac-parent').on('click',function(e){
    e.preventDefault();
    $(this)
      .find('.fas').toggleClass('fa-plus fa-minus').end()
      .next('.ac-child').slideToggle().end()
      .closest('ul').find('.ac').not($(this).closest('.ac')).find('.fa-minus').toggleClass('fa-plus fa-minus').end()
      .find('.ac-child').slideUp();
  });
});

※調整

Comments

[sh_azikikou]

回答いただき誠にありがとうございます。
JQueryでした。投稿内容がまとまらず失礼しました。

親は<a>タグである必要はありませんが、まだ修正出来ていませんでした。
Twigファイル上でメニュー自体を動的に取得しているのです。親カテゴリと子カテゴリの取得について条件分岐がモタついていて未だ直せませんでした。。。ごめんなさい。

お忙しいところソースコードまで提示して下さり誠にありがとうございます。本当にありがとうございます。。

[yambejp]

すみません、変な書き方があったので修正しました

[sh_azikikou]

わざわざご丁寧にありがとうございます。確認します！