title: Javascript dropdown for touch devices
body: <p>I am trying to make the submenu open and close by class <code>toggle</code>.</p>
  <p>WHy is the class <code>on</code> not toggled on click, to hide the submenu?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var u = document.querySelector('ul');
  var l = u.querySelectorAll("li");
  var a = u.querySelectorAll('li.hasul &gt; a');
  
  for(var i=0; i&lt;a.length;i++){
    a[i].addEventListener('click', function(){
      l.forEach(function(i,n){
        i.classList.remove('on');
      });
      event.target.parentNode.classList.toggle('on');
     });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul{display:flex; list-style:none;}
  li{margin:5px;
    position: relative;
    font-size: 20px;
  }
  li ul{
    border: 1px solid #ccc;
    padding: 10px;
    position: absolute;
    left: 0;
    width: 150px;
    top: 40px;
    display: none;
  }
  li.on{
    border-bottom: 3px solid red;
  }
  li.on ul{
    display: block;
  }
  a{text-decoration:none;display:block; padding: 5px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li class="hasul"&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Level 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Level 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Level 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="hasul"&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Level 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Level 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Level 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://codepen.io/felixaj/pen/poyyper" rel="nofollow noreferrer">https://codepen.io/felixaj/pen/poyyper</a></p>