On-cliquez sur JS ne ne fonctionne pas

Question

Mentionnés ci-dessous est mon code HTML pour le menu de navigation:

<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> 

Mon code JavaScript est la suivante:

$(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'); 
    } 
}); 

Et maintenant sur-cliquez sur l'action ne fonctionne pas. Quelqu'un s'il vous plaît aider !! J'ai reçu ce code d'un tutoriel en ligne. Depuis que je suis nouveau à JavaScript, s'il vous plaît corriger le code pour moi. Merci d'avance.

Answer 1

Votre code fonctionne parfaitement bien, il se peut que la classe CSS soit incorrecte, ce qui est à l'origine du problème, pouvez-vous revérifier avec la classe 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>