jQuery アコーディオンが全て開いてしまいます。

jQueryを使って、クリックするとアイコンが切り替わって開閉するアコーディオンメニューを作成しました。
しかし、一つの要素をクリックすると、全てのメニューが開いて閉じて。をしてしまいます。

クリックした要素(メニュー)だけをアコーディン開閉させるにはどうすればよいでしょうか?

HTML
1    <nav class="gnav">
2      <ul class="gnav__list">
3        <li class="gnav__list--item"><span class="gnav__list--item-varL"></span><a href="../doctor.html">院長ご挨拶・医師紹介<span class="gnav__list--item-var"></span></a></li>
4        <li class="gnav__list--item"><a href="../visit.html">専門性の高い治療<span class="gnav__list--item-var"></span><i class="fas fa-angle-down gnav__over-list--arrow-down gnav__over-list--arrow"></i></a>
5          <ul class="gnav-accordion">
6            <li class="gnav-accordion--item"><i class="fas fa-chevron-right gnav__over-list--arrow"></i>レーザー飛蚊症治療
7              <ul class="accordion__low">
8                <li class="accordion__low-item"><a href="#">ダミー記事</a></li>
9                <li class="accordion__low-item"><a href="#">ダミー記事</a></li>
10                <li class="accordion__low-item"><a href="#">ダミー記事</a></li>
11                <li class="accordion__low-item"><a href="#">ダミー記事</a></li>
12              </ul>
13              <!--accordion__low--> 
14            </li>
15            <!--gnav-accordion--item-->
16            <li class="gnav-accordion--item"><i class="fas fa-chevron-right  gnav__over-list--arrow"></i>眼球注射治療<br>
17              （加齢黄斑変性など）
18              <ul class="accordion__low">
19                <li class="accordion__low-item"><a href="#">ダミー記事</a></li>
20                <li class="accordion__low-item"><a href="#">ダミー記事</a></li>
21                <li class="accordion__low-item"><a href="#">ダミー記事</a></li>
22                <li class="accordion__low-item"><a href="#">ダミー記事</a></li>
23              </ul>
24              <!--accordion__low--> 
25            </li>
26            <!--gnav-accordion--item-->
27          </ul>
28          <!--gnav-accordion--> 
29        </li>
30        <!--gnav__list--item-->
31      </ul>
32      <!--gnav__list--> 
33    </nav>
34<!--gnav-->

jQuery
1$(function () {
2  $('gnav-accordion--item').click(function () {
3
4    //メニューバーが閉じているなら
5    if ($('.accordion__low').hasClass('open')) {
6      $('.accordion__low').removeClass('open');
7      $('.accordion__low').slideDown();
8      //fontawesome下向き矢印にする
9      $('.gnav-accordion--item').children('i').removeClass()
10        .addClass('fas fa-chevron-down');
11    }
12
13    //メニューバーが開いているなら
14    else {
15      $('.accordion__low').addClass('open');
16      $('.accordion__low').slideUp();
17      //fontawesome右向き矢印にする
18      $('.gnav-accordion--item').children('i').removeClass()
19        .addClass('fas fa-chevron-right');
20    }
21  });
22});

gnav-accordion--itemクラス(li)をクリックした際にその下層にあるaccordion__lowクラス(ul要素)の中身がオープンされ、gnav-accordion--itemのアイコンも切り替わるコードを書きました。

現状、「レーザー飛蚊症治療」(.gnav-accordion--item)をクリックすると、「眼球注射治療（加齢黄斑変性など）」(.gnav-accordion--item)の下層メニューも同時に開いて、閉じてをしてしまいます。

クリックしたメニューだけにアコーディオンを動作させる方法を教えてください。
よろしくお願いします。

退会済みユーザー

2020/12/16 00:42

jQuery のバージョンは何でしょう？最初の ul と li タグが閉じられていません。

yambejp

2020/12/16 01:06

たとえば「レーザー飛蚊症治療」が開いている状態でクリックされたとき閉じるのでしょうか？

退会済みユーザー

2020/12/16 01:51

jQuery のバージョンは何でしょう？

Fukusuke0604

2020/12/16 01:52

最初に記載していたHTML scriptともに誤りがありました。申し訳ありません。停止しました。

行動規範の内容に同意します

回答3件

ベストアンサー

クリックしたメニューだけにアコーディオンを動作させる方法を教えてください。

質門のコメントで書いた「最初の ul と li タグが閉じられていません」というところを直して（そこは問題とは関係ないかもしれませんが）、リスナをアタッチするのは $('.gnav__list--item') ではなくて $('.gnav-accordion--item') にして、クリックイベントを発生させたオブジェクトをリスナに渡される event の target プロパティで取得し、それに対して操作すればできると思います。

<script src="Scripts/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $(function () {
        $('.gnav-accordion--item').click(function (event) {

            var target = event.target;
            //メニューバーが閉じているなら
            if ($(target).children('.accordion__low').hasClass('open')) {
                $(target).children('.accordion__low').removeClass('open');
                $(target).children('.accordion__low').slideDown();
                //fontawesome下向き矢印にする
                $(target).children('i').removeClass()
                    .addClass('fas fa-chevron-down');
            }

            //メニューバーが開いているなら
            else {
                $(target).children('.accordion__low').addClass('open');
                $(target).children('.accordion__low').slideUp();
                //fontawesome右向き矢印にする
                $('.gnav-accordion--item').children('i').removeClass()
                    .addClass('fas fa-chevron-right');
            }
        });
    });  
</script>

投稿2020/12/16 01:33

退会済みユーザー

総合スコア0

Fukusuke0604

2020/12/16 01:54

event の target プロパティで取得することで無事に解決できました。 event の target プロパティというものを知りませんでした。もっと理解を深められるように知識を増やしていきます。本当にありがとうございました。

行動規範の内容に同意します

クリックした要素の子要素を対象とすればできそうな気がします。
挙動を確認できていませんが、イメージとしては下記のようなコードです。

javascript
1$(function() {
2    $('li:has(.fas)').click(function(){
3
4        let targetEl = $(this).children('ul');
5        //メニューバーが閉じているなら
6        if(targetEl.hasClass('open')){
7            targetEl.removeClass('open');
8            targetEl.slideDown();
9            //fontawesome下向き矢印にする
10            $(this).children('.fas').removeClass()
11            .addClass('fas fa-chevron-down');
12        }
13
14        //メニューバーが開いているなら
15        else{
16            targetEl.addClass('open');
17            targetEl.slideUp();
18            //fontawesome右向き矢印にする
19            $(this).children('.fas').removeClass()
20            .addClass('fas fa-chevron-right');
21        }
22    });
23});