링크를 클릭 할 때 메뉴가 닫히지 않음

Question

개인이 사이트를 만든 경우 한 페이지가 link인데, 클릭하면 열리는 쪽의 고정 메뉴가 있습니다.이 링크에는 다음과 같은 앵커가 있습니다. 일반적으로 링크를 클릭하면 메뉴가 닫히지 않는 사이트를 클릭합니다. 아이디어는 내 코드의 일부를 따르므로 link에 액세스하여 문제를 볼 수 있습니다.

전환 JS는 : 아무것도 발생하지 않도록

class ShapeOverlays { 
    constructor(elm) { 
     this.elm = elm; 
     this.path = elm.querySelectorAll('path'); 
     this.numPoints = 2; 
     this.duration = 600; 
     this.delayPointsArray = []; 
     this.delayPointsMax = 0; 
     this.delayPerPath = 200; 
     this.timeStart = Date.now(); 
     this.isOpened = false; 
     this.isAnimating = false; 
    } 
    toggle() { 
     this.isAnimating = true; 
     for (var i = 0; i < this.numPoints; i++) { 
      this.delayPointsArray[i] = 0; 
     } 
     if (this.isOpened === false) { 
      this.open(); 
     } else { 
      this.close(); 
     } 
    } 
    open() { 
     this.isOpened = true; 
     this.elm.classList.add('is-opened'); 
     this.timeStart = Date.now(); 
     this.renderLoop(); 
    } 
    close() { 
     this.isOpened = false; 
     this.elm.classList.remove('is-opened'); 
     this.timeStart = Date.now(); 
     this.renderLoop(); 
    } 
    updatePath(time) { 
     const points = []; 
     for (var i = 0; i < this.numPoints; i++) { 
      const thisEase = this.isOpened ? 
        (i == 1) ? ease.cubicOut : ease.cubicInOut : 
        (i == 1) ? ease.cubicInOut : ease.cubicOut; 
      points[i] = thisEase(Math.min(Math.max(time - this.delayPointsArray[i], 0)/this.duration, 1)) * 100 
     } 

     let str = ''; 
     str += (this.isOpened) ? `M 0 0 V ${points[0]} ` : `M 0 ${points[0]} `; 
     for (var i = 0; i < this.numPoints - 1; i++) { 
      const p = (i + 1)/(this.numPoints - 1) * 100; 
      const cp = p - (1/(this.numPoints - 1) * 100)/2; 
      str += `C ${cp} ${points[i]} ${cp} ${points[i + 1]} ${p} ${points[i + 1]} `; 
     } 
     str += (this.isOpened) ? `V 0 H 0` : `V 100 H 0`; 
     return str; 
    } 
    render() { 
     if (this.isOpened) { 
      for (var i = 0; i < this.path.length; i++) { 
       this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * i))); 
      } 
     } else { 
      for (var i = 0; i < this.path.length; i++) { 
       this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * (this.path.length - i - 1)))); 
      } 
     } 
    } 
    renderLoop() { 
     this.render(); 
     if (Date.now() - this.timeStart < this.duration + this.delayPerPath * (this.path.length - 1) + this.delayPointsMax) { 
      requestAnimationFrame(() => { 
       this.renderLoop(); 
      }); 
     } else { 
      this.isAnimating = false; 
     } 
    } 
} 

(function() { 
    const elmHamburger = document.querySelector('.hamburger'); 
    const gNavItems = document.querySelectorAll('.global-menu__item'); 
    const elmOverlay = document.querySelector('.shape-overlays'); 
    const overlay = new ShapeOverlays(elmOverlay); 

    elmHamburger.addEventListener('click',() => { 
     if (overlay.isAnimating) { 
      return false; 
     } 
     overlay.toggle(); 
     if (overlay.isOpened === true) { 
      elmHamburger.classList.add('is-opened-navi'); 
      for (var i = 0; i < gNavItems.length; i++) { 
       gNavItems[i].classList.add('is-opened'); 
      } 
     } else { 
      elmHamburger.classList.remove('is-opened-navi'); 
      for (var i = 0; i < gNavItems.length; i++) { 
       gNavItems[i].classList.remove('is-opened'); 
      } 
     } 
    }); 
}()); 

Answer 1

앵커 태그의에 더 HREF의의를가 없습니다. 이것들은 링크가 될 것인가 또는 클릭 할 때 일부 애니메이션을 수행하려고합니까?

앵커의 href가 괜찮 으면 약간의 자바 스크립트를 추가하십시오. 난 그냥 사용중인 코드를 재활용하지만, 이벤트 리스너를 .hamburger에 추가하는 대신 gNavItems에 추가하고 필요없는 라인을 제거합니다.

(function() { 
    const elmHamburger = document.querySelector('.hamburger'); 
    const gNavItems = document.querySelectorAll('.global-menu__item'); 
    const elmOverlay = document.querySelector('.shape-overlays'); 
    const overlay = new ShapeOverlays(elmOverlay); 

    $('.global-menu__item').each(function(){ 
     $(this).on('click' , function(){ 
      if (overlay.isAnimating) { 
       return false; 
      } 
      overlay.toggle(); 
      elmHamburger.classList.remove('is-opened-navi'); 
      for (var i = 0; i < gNavItems.length; i++) { 
       gNavItems[i].classList.remove('is-opened'); 
      } 
     }); 
    }); 

}());