title: Open/Close submenu when clicking the item name
body: <p>I am having problems with the menu part of a wordpress site (salient theme), when i am on mobile, i open the menu with the hamburger button and have several options, some with sub menus, so the items with sub menus only open when clicking the little arrow icon to the right of the item, i am trying to get it to open also when you click on the item itself by making it so when you click the item it triggers a click on the arrow</p>
  
  <p><a href="https://i.stack.imgur.com/PUhbP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PUhbP.png" alt="enter image description here"></a></p>
  
  <p>here is the html of the menu </p>
  
  <p><a href="https://i.stack.imgur.com/IllZh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IllZh.png" alt="enter image description here"></a></p>
  
  <p>and here is the javascript i am doing to get it to work(only doing it for the first item with submenu here), i am new to javascript but for what i've seen i think this should work (i am using the Code Snippets
  plugin for wordpress)</p>
  
  <pre><code>&lt;?php
  add_action( 'wp_footer', function () { ?&gt;
  &lt;script&gt;    
  
  
  var el = (document.querySelector('.menu-item.menu-item-type-custom.menu- 
  item-object-custom.menu-item-has-children.menu-item-5812 a'));
  console.log(el);    
  
  var el2 =(document.querySelector('.menu-item.menu-item-type-custom.menu- 
  item-object-custom.menu-item-has-children.menu-item-5812 span'));
  console.log(el2);
  
  el.onclick = function() 
  {
      $el2.click();
  };
  
  &lt;/script&gt;
  
  &lt;?php } );
  ?&gt;
  </code></pre>
  
  <p>SOLUTION:</p>
  
  <p>aside from the answear by Alvaro Montoro i needed to encapsulate everything inside an eventListener with DomLoaded, here is the final code</p>
  
  <pre><code>add_action( 'wp_footer', function () { ?&gt;
  &lt;script&gt;
  
  document.addEventListener('DOMContentLoaded', function() {
  
  var elSupervivencia = document.querySelector('#slide-out-widget-area &gt; div &gt; 
  div.inner &gt; div &gt; ul:nth-child(1) &gt; li.menu-item.menu-item-type-custom.menu- 
  item-object-custom.menu-item-has-children.menu-item-5812 &gt; a');
  console.log(elSupervivencia);    
  
  var elSupervivenciaFlecha = document.querySelector('#slide-out-widget-area &gt; 
  div &gt; div.inner &gt; div &gt; ul:nth-child(1) &gt; li.menu-item.menu-item-type- 
  custom.menu-item-object-custom.menu-item-has-children.menu-item-5812 .ocm- 
  dropdown-arrow i');
  console.log(elSupervivenciaFlecha);
  
  elSupervivenciaFlecha.onclick = function() {
  console.log("Clicked on the span");
  }
  
  elSupervivencia.onclick = function(e) 
  {
  e.preventDefault();
  elSupervivenciaFlecha.click(); 
  };
      });
  &lt;/script&gt;
  
  &lt;?php } );
  </code></pre>