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>