8/2 개발일지

정명환·2022년 8월 2일

대구 ai 스쿨

목록 보기

68/79

1. 학습한 내용

메뉴 버튼 더블 클릭 시 오작동 오류 제거

메뉴 버튼을 더블 클릭 할 시 delay를 준 것이 꼬여버려 메뉴가 나오지 않는 에러가 있었습니다.

처리 전)

        <a><img class="ham" src="../img/toco-common/company_N_busines_N_yard-menu.svg" alt="" ><img style="position: absolute;" src="../img/toco-common/company_N_busines_N_yard-menu.svg" alt="" ></a>



   $(".ham").css('display',"none");
      setTimeout(function() {  $(".ham").css('display',"block");}, 600);

그래서 검색을 통해 여러가지 방법을 찾아 보았지만 적용되지 않았고 결국 지금 알고 있는 지식을 사용해 미리 똑같은 메뉴바 이미지를 하나 더 추가해 겹친 후 display : none과 딜레이를 주어 다시 block처리 하는 것으로 구현을 하였습니다.
처리 후)

메인 화면에서 메뉴바 펼치고 올릴 시 배경이 그대로인 것 수정

메뉴바를 펼친 상태에서 스크롤을 다시 올렸을 때 원래 배경으로 돌아와버리는 것을 수정하였습니다. 스크롤을 원래대로 돌리면 돌아오는 코드가 우선되어 돌아오지 않았던 경우였습니다.
처리 전)

 $('#gon').removeClass('active');
                const logo = document.querySelector('.logo img');
                logo.src = "./img/toco-common/logo-Resoft-white.png"
                const ham = document.querySelector('.ham img');
                ham.src = "./img/toco-img1/icon-menu.svg"




    if($('.so').hasClass('close')){
                $('#gon').removeClass('active');
                const logo = document.querySelector('.logo img');
                logo.src = "./img/toco-common/logo-Resoft-white.png"
                const ham = document.querySelector('.ham img');
                ham.src = "./img/toco-img1/icon-menu.svg"}

위처럼 본래 코드에서 if문을 추가해 메뉴가 펼쳐져있는 상태에서는 돌아오지 않게 구현을 하였습니다.

처리 후)