slideToggle 중복실행 시

 

<div>
        <div class="hamMenu">
        <input type="checkbox" id="ham">
        <label for="ham">
          <span></span>
          <span></span>
          <span></span>
        </label>
      </div>
      <nav>
        <ul>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Instagram</a></li>
          <li><a href="#">Youtube</a></li>
          <li><a href="#">English</a></li>
        </ul>
      </nav>
</div>

$('.hamMenu').off('click').click(function(e){
  e.preventDefault();
  $('header nav').slideToggle(300);
});

slideToggle 적용 시 display:none에서 block이 된 후 다시 none이 되는 문제 발생

.off()만으로는 해결되지 않았으나 일단 넣어둠

e.preventDefault(); 혹은 return false; 로 중복실행문제 해결

하지만 span으로 만들어둔 햄버거 메뉴의 transform으로 만들어둔 애니메이션이 꺼짐

 

참고사이트

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=zimny327&logNo=221474775919