title: How to make addEventListener 'click' work on two menu items with same class
body: <p>Page: <a href="https://ensjotannklinikk.no/" rel="nofollow noreferrer">https://ensjotannklinikk.no/</a></p>
  <p>Here's <a href="https://jsfiddle.net/dyah459t/8/" rel="nofollow noreferrer">a fiddle</a></p>
  <p>The first menu item called &quot;<strong>Behandlinger</strong>&quot; is set up with this JS (courtesy of <a href="https://stackoverflow.com/users/15377355/biberman">biberman</a>) to make the submenu emerge and retract properly.</p>
  <pre class="lang-js prettyprint-override"><code>var submenu = document.querySelector('.behandlinger-meny');
  var menuTrigger = document.querySelector('.behandlinger-item');
  
  //javascript version of jQuery isChild()
  function isChild(item, parentItem) {
      while (item != undefined &amp;&amp; item != null &amp;&amp; item.tagName.toUpperCase() != 'BODY'){
          if (item == parentItem){
              return true;
          }
          item = item.parentNode;
      }
      return false;
  }
  
  menuTrigger.addEventListener('click', function() {
      submenu.style.height = '55px';
  });
  
  document.querySelector('body').addEventListener('click', function(e) {
      if ( !isChild(e.target, menuTrigger) &amp;&amp; !isChild(e.target, submenu) ) {
          submenu.style.height = 0;
      }
  });
  
  document.addEventListener('keyup', function(e) {
      if ( e.key == 'Escape' ) {
          submenu.style.height = 0;
      }
  });
  </code></pre>
  <p><strong>Why is this not working on mobile?</strong> I wish for the submenu (<code>.behandlinger-meny</code>) height set to <code>55px</code> when the menu item Behandlinger (<code>.behandlinger-item</code>) is clicked. It works perfectly, except <strong>not on the menu item click on mobile</strong>.</p>
  <hr />
  <p>Realized the mobile menu has a <code>&lt;nav&gt;</code> of its own, which may affect the event listener. I have updated both the fiddle and the simplified structure below as well as the core question. Seems really close to a simple solution now.</p>
  <p>Simplified structure:</p>
  <pre class="lang-css prettyprint-override"><code>.behandlinger-meny {
      height: 0;
      transition: all .3s cubic-bezier(0.4, 0.0, 0.2, 1);
      overflow: hidden;
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;wrapper&quot;&gt;
    &lt;header&gt;
  
      &lt;nav class=&quot;main-menu&quot;&gt;
        &lt;ul&gt;
          &lt;li class=&quot;behandlinger-item&quot;&gt;&lt;a href=&quot;#behandlinger&quot;&gt;Behandlinger&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Item 4&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;nav class=&quot;mobile-main-menu&quot;&gt;
        &lt;ul&gt;
          &lt;li class=&quot;mobile-item behandlinger-item&quot;&gt;&lt;a href=&quot;#behandlinger&quot;&gt;Behandlinger&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Item 4&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  
    &lt;/header&gt;
  
    &lt;section&gt; &lt;!-- Separated to follow page scroll --&gt;
      &lt;div id=&quot;behandlinger&quot;&gt; &lt;!-- Scroll to position on item click --&gt;
        &lt;nav class=&quot;behandlinger-meny&quot;&gt;
          &lt;script&gt;&lt;/script&gt; &lt;!-- Script in question  --&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a&gt;Sub item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Sub item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Sub item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
    &lt;main&gt;
      …
    &lt;/main&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Runnable version:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var submenu = document.querySelector('.behandlinger-meny');
  var menuTrigger = document.querySelector('.behandlinger-item');
  
  //javascript version of jQuery isChild()
  function isChild(item, parentItem) {
      while (item != undefined &amp;&amp; item != null &amp;&amp; item.tagName.toUpperCase() != 'BODY'){
          if (item == parentItem){
              return true;
          }
          item = item.parentNode;
      }
      return false;
  }
  
  menuTrigger.addEventListener('click', function() {
      submenu.style.height = '55px';
  });
  
  document.querySelector('body').addEventListener('click', function(e) {
      if ( !isChild(e.target, menuTrigger) &amp;&amp; !isChild(e.target, submenu) ) {
          submenu.style.height = 0;
      }
  });
  
  document.addEventListener('keyup', function(e) {
      if ( e.key == 'Escape' ) {
          submenu.style.height = 0;
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.behandlinger-meny {
      height: 0;
      transition: all .3s cubic-bezier(0.4, 0.0, 0.2, 1);
      overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;header&gt;
  
      &lt;nav class="main-menu"&gt;
        &lt;ul&gt;
          &lt;li class="behandlinger-item"&gt;&lt;a href="#behandlinger"&gt;Behandlinger&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Item 4&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;nav class="mobile-main-menu"&gt;
        &lt;ul&gt;
          &lt;li class="mobile-item behandlinger-item"&gt;&lt;a href="#behandlinger"&gt;Behandlinger&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;Item 4&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  
    &lt;/header&gt;
  
    &lt;section&gt; &lt;!-- Separated to follow page scroll --&gt;
      &lt;div id="behandlinger"&gt; &lt;!-- Scroll to position on item click --&gt;
        &lt;nav class="behandlinger-meny"&gt;
          &lt;script&gt;&lt;/script&gt; &lt;!-- Script in question  --&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a&gt;Sub item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Sub item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Sub item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
    &lt;main&gt;
      …
    &lt;/main&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>