편집 : JavaScript를 깨끗하게 닦고 처음부터 시작하여 모든 질문 내용을 제거했습니다. 내가 말할 수있는 한 나는 처음과 다른 것을하지 않았다. 이전에는 왜 작동하지 않았는지 아직 잘 모르겠지만 지금은 작동하고 있습니다. 작동하는 addEventListener click / toggle 이벤트에 대해서는 아래 답변을 참조하십시오.
이벤트 리스너에 대한 인수는 이벤트 입니다. 이벤트 리스너가 연결된 요소 를 원하면 이벤트의를 참조하십시오 currentTarget.
function activateOffCanvasNav(e) {
e.currentTarget.classList.toggle('active');
}
e.classList.toggle대신 수행하려고 하면 현재 수행중인 것처럼 이벤트에 classList속성 이 없기 때문에 TypeError가 발생 합니다.
작동하는 라이브 데모 :
document.getElementById('hamburger-icon').addEventListener('click', activateOffCanvasNav);
function activateOffCanvasNav(e) {
console.log('here')
e.currentTarget.classList.toggle('active');
}.active {
background-color: green;
}<header>
<!-- small screens only -->
<div class="small-nav-header">
<a id="nav-toggle" href="#!">
<div id="hamburger-icon" class="hamburger-icon">
<div class="bar1">bar</div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</a>
</div>
</header>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다