title: bootstrap 4 nested dropdowns
body: <p>I'm attempting to build a nested dropdown menu. While I have managed to get it to open the next level, my implementation fails to close on click event.</p>
  
  <p><a href="https://jsfiddle.net/qw8fmhap/63/" rel="nofollow noreferrer">https://jsfiddle.net/qw8fmhap/63/</a></p>
  
  <p>javascript</p>
  
  <pre><code> const nodeList = document.querySelectorAll('.dropdown-menu a.dropdown-toggle');
      nodeList.forEach((elem) =&gt; {
        elem.addEventListener('click', (e) =&gt; {
        e.stopPropagation();
          let parent = elem.offsetParent;
          if (!elem.nextElementSibling.classList.contains('show')) {
            parent.classList.remove('show');
          }
  
          let subMenu = elem.nextElementSibling;
          console.log(subMenu);
          subMenu.classList.toggle('show');
          elem.parentElement.classList.toggle('show');
          console.log(elem.parentElement);
        });
      });
  </code></pre>