アコーディオンの開閉時にアイコンを変える

プログラミングの勉強日記

2020年6月28日　Progate Lv.148
ポートフォリオ作成中
前回作成したwebページの調整をしている

目標物

　こちらの記事でアコーディオン機能について説明している。（今回はアコーディオン機能については触れない）
　アコーディオンメニューで以下のようにアイコンを切り替えたい。アコーディオン機能を利用して写真のようにアコーディオンが閉じているときはメニューバーのFont Awesomeを表示して、アコーディオンが開いているときは「×」のFont Awesomeを表示したい。

コード

HTMLファイル

<div class="navigation">
  <span class="fas fa-bars naviTop"></span>
    <nav>
      <ul>
        <li><a href="#iceland">Iceland</a></li>
        <li><a href="#aurora">Aurora</a></li>
        <li><a href="#blueLagoon">BLUE LAGOON</a></li>
        <li><a href="#london">London</a></li>
        <li><a href="#paris">Paris</a></li>
        <li><a href="#iceland">Iceland</a></li>
        <li><a href="#spain">Spain</a></li>
        <li><a href="#map">Map</a></li>
        <li><a href="#food">Foods</a></li>
      </ul>
    </nav>
</div>

childrenメソッド：指定したセレクタが持つ子要素（1階層だけ下）の中から指定したセレクタに合致した要素を取得したいときに使う。

removeClassメソッド：指定した要素から指定したクラスを取り除ける。
　　HTML：<p class="text-contents text-active">...</p>
　　jQuery：$('.text-contents').removeClass('text-active');

addClassメソッド：指定した要素にクラスを追加できる。
　　HTML：<p class="text-contents">...</p>
　　jQuery：$('.text-contents').addClass('text-active');
　　text-contentsクラスのついた要素にtext-activeというクラスを追加する。

　これらを利用すると、アイコンの切り替えができる。
　　1. childrenメソッドでnavigationクラスの1つ下の階層の中からspanタグに合う要素を取得する。
　　2. removeClassメソッドでクラスを取り除く。
　　3. addClassメソッドでクラスを追加する。
　　
実際にコードは以下のようになる。

jsファイル(jQuery)

$('.naviTop').click(function(){
    // メニューバーが開かれているなら
    if($('nav').hasClass('open')){
      $('nav').removeClass('open');
      $('nav').slideDown();

      // Font Awesomeを×にする
      $('.navigation').children('span').removeClass().addClass('fas fa-times naviTop');

    }
    // メニューバーが開かれていないなら
    else{
      $('nav').addClass('open');
      $('nav').slideUp();

      // Font Awesomeをメニューバーにする
      $('.navigation').children('span').removeClass().addClass('fas fa-bars naviTop');
    }
});

感想

　classの操作であるのに、最初はhtmlメソッドやtextメソッドで変えようとしてしまって、なかなかうまくいかなかった。この1つの機能をつくのに時間がとてもかかったが、復習をする良い機会になった。