프로그래밍 공부 일기

2020년 6월 28일 Progate Lv.148
포트폴리오 작성 중
마지막으로 만든 웹 페이지를 조정했습니다.

목표물

이 기사 에서 아코디언 기능에 대해 설명하고 있다. (이번에는 아코디언 기능에 대해서는 언급하지 않는다)
아코디언 메뉴에서 다음과 같이 아이콘을 전환하고 싶다. 아코디언 기능을 이용해 사진과 같이 아코디언이 닫혀 있을 때는 메뉴 바의 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 메소드로 바꾸려고 해서, 좀처럼 잘 되지 않았다. 이 하나의 기능을 만드는 데 시간이 너무 걸렸지만 복습을 할 좋은 기회가 되었다.