JS가 언급 한 다음

Question

작동하지 않습니다에 클릭하면 탐색 메뉴 내 HTML 코드 작동 안됨. 누군가 제발 도와주세요 !! 온라인 튜토리얼에서이 코드를 얻었습니다. JavaScript를 처음 사용하기 때문에 코드를 수정하십시오. 미리 감사드립니다.

Answer 1

코드가 완벽하게 작동합니다. 문제를 일으키는 CSS 클래스가 잘못되었을 수 있습니다. CSS 클래스를 사용하여 다시 확인할 수 있습니까?

CSS :

.show-submenu > nav{ 
    display:block; 
} 
.submenu{ 
    display:none; 
} 

---

$(document).ready(function() { 
 
    [].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el) { 
 
    el.addEventListener('click', onClick, false); 
 
    }); 
 

 

 
    function onClick(e) { 
 
    e.preventDefault(); 
 
    var el = this.parentNode; 
 
    el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el); 
 
    } 
 

 
    function showSubMenu(el) { 
 
    el.classList.add('show-submenu'); 
 
    document.addEventListener('click', function onDocClick(e) { 
 
     e.preventDefault(); 
 
     if (el.contains(e.target)) { 
 
     return; 
 
     } 
 
     document.removeEventListener('click', onDocClick); 
 
     hideSubMenu(el); 
 
    }); 
 
    } 
 

 
    function hideSubMenu(el) { 
 
    el.classList.remove('show-submenu'); 
 
    } 
 
});

.show-submenu > nav { 
 
    display: block; 
 
} 
 

 
.submenu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav role="navigation" class="nav"> 
 
    <ul class="nav-items"> 
 
    <li class="nav-item"> 
 
     <a href="#" class="nav-link"><span>About Us</span></a></li> 
 
    <li class="nav-item dropdown"> 
 
     <a href="#" class="nav-link"><span>Divisions</span></a> 
 
     <nav class="submenu"> 
 
     <ul class="submenu-items"> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">Div 1</a></li> 
 
      <li class="submenu-item"><a href="#" class="submenu-link">Div 2</a></li> 
 
     </ul> 
 
     </nav> 
 
    </ul> 
 
</nav>