title: JQuery: How to show current nested sub-menu and hide the others?
body: <pre><code>$('li').on('click', function(){
   $('li').not(this).each(function(){
    $(this).children('ul').addClass('hide');
   });
   $(this).children('ul').removeClass('hide');
  });
  </code></pre>
  
  <p>Help me, please! I got several hours on this and I can't figure how to solve it. The code above it's for a horizontal multi-level menu. On click shows a sub-menu and hide all the other sub-menus, everything works fine until this point. </p>
  
  <p>The problem comes when I need to open a sub-menu nested to a sub-menu. The code hide all the elements and show only de clicked sub-menu; hide all the elements including the parent of the sub-menu so the clicked sub-menu is not showed.</p>
  
  <p>How to show and hide the nested sub-menu??? I hope somebody can help me and thanks a lot in advance. Here is the simplify menu HTML code, the classic nested unordered lists.</p>
  
  <p><strong>Problem example: <a href="https://jsfiddle.net/EddyRocket/b6t527qx/" rel="nofollow">JSFiddle</a></strong></p>
  
  <pre><code>&lt;ul class="menu"&gt;
   &lt;li&gt;Item
    &lt;ul class="sub-menu"&gt;&lt;!--This works fine--&gt;
     &lt;li&gt;Item
      &lt;ul class="nested sub-menu"&gt;&lt;!--Here is the problem--&gt;
       &lt;li&gt;Item
        &lt;ul class="nested sub-menu"&gt;&lt;!--Here is the problem too--&gt;
         &lt;li&gt;Item&lt;/li&gt;
          &lt;/ul&gt;
         &lt;/li&gt;
        &lt;/ul&gt;
       &lt;/li&gt;
      &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;Item
      &lt;ul class="sub-menu"&gt;&lt;!--This works fine--&gt;
       &lt;li&gt;Item
        &lt;ul class="nested sub-menu"&gt;&lt;!--Here is the problem--&gt;
         &lt;li&gt;Item
          &lt;ul class="nested sub-menu"&gt;&lt;!--Here is the problem too--&gt;
           &lt;li&gt;Item&lt;/li&gt;
          &lt;/ul&gt;
         &lt;/li&gt;
        &lt;/ul&gt;
       &lt;/li&gt;
     &lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>