title: jquery responsive menu not working properly
body: <p>I am  trying to make a responsive navbar using jquery but it seems like the toggleClass is not being applied properly. Below is my js and html:</p>
  
  <pre><code>$(document).ready(function () {         
      $(".burguer-nav").on("click", function() {      
          $("header nav ul").toggleClass("open"); 
      }); 
  });
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="https://code.jquery.com/jquery-3.1.0.js"&gt;&lt;/script&gt;
          &lt;script src="menu.js"&gt; &lt;/script&gt;
          &lt;style&gt;
              @media only screen and (max-width: 480px){
                  a{
                      text-align:center;
                  }
                  .burguer-nav{
                      display: block;
                      height: 40px;
                      cursor: pointer;
                  }
                  header nav ul{
                      overflow:hidden;
                      height:0;
                      background-color: #505050;
                  }
                  header nav ul.open{
                      height:auto;
                  }
                  header nav ul li{
                      float:none;
                      width:100%;
                      margin:0;
                  }
                  header nav ul li a{
                      color: #fff;
                      padding: 10px;
                      display:block;
                      margin:0;
                      border-bottom: 1px solid #404040;
                  }
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;link rel="stylesheet" href="stylesheet.css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"&gt;
      &lt;body&gt;
       &lt;header&gt;
          &lt;nav&gt;
              &lt;a href="" class="burguer-nav"&gt;&lt;i class="fa fa-bars" aria-hidden="true"&gt;&lt;/i&gt; Primary Menu&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;Home&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;About&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;Contact&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;Services&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>At the  moment,when I click on the link(ancor tag) the menu quickly appears and then disappears again so actually do not even see the menu items.
  What can I do to make the toggle work properly? Anything wrong that am doing in the code? </p>