title: Hide jquery menu after click function
body: <p>I have a simple function to show a dropdown menu.</p>
  
  <p>This is a responsive menu, it only works with defined sizes on my media queries, that's why I want to hide submenu after click.</p>
  
  <p>I want to click on one of the links and then this dropdown menu hides. I am aware of .hide() but I can't get it to work.</p>
  
  <p>Any help?</p>
  
  <p>I want to keep this code simple &amp; clean.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;nav&gt;
              &lt;ul class="navigation"&gt;
                        &lt;img src="img/menu.png" alt="mobile" width="50" height="50"/&gt;
                          &lt;li class="n1"&gt;&lt;a href="#home"&gt;Principal&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="n2"&gt;&lt;a href="#services"&gt;Serviços&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="n3"&gt;&lt;a href="#team"&gt;Equipa&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="n4"&gt;&lt;a href="#contact"&gt;Contactos&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;span&gt;Euclides Style | 965648044&lt;/span&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$("nav").click(function () {
      $(".navigation").toggleClass('open');
  });
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I used a simple solution:</p>
  
  <pre><code>$(".navigation a").click(function () {
              $(".navigation").removeClass('open');
      });
  </code></pre>
  
  <p>Thanks everyone for your help!</p>