title: When click drop down menu opens all sub menus
body: <p>I have a menu with several sub menus and when I click to open one of the sub menus, all sub menus all openned. How can I open only the clicked sub menu?</p>
  
  <p><em>I know that this has been asked several times but I can NOT figure out how to fix my problem.</em></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="menu-main-top-menu"&gt;
    &lt;li class="menu-item menu-item-has-children"&gt;&lt;a href="#"&gt;Top Item with Sub Items&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
    &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
    &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
    &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
    &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
    &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="menu-item menu-item-has-children"&gt;&lt;a href="#"&gt;Top Item with Sub Items&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
      &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Top Item&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Top Item&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Top Item&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-item menu-item-has-children"&gt;&lt;a href="#"&gt;Top Item with Sub Items&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
      &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Top Item &lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.sub-menu {
      display: none;
      width: 250px;
      padding: 20px;
      background: #f1f1f1;
  }
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>  $('.menu-item-has-children').on('click', function(e) {
      e.preventDefault();
      if (!$(this).hasClass('active')) {
          $('.sub-menu').slideDown(100);
          $('.menu-item-has-children').toggleClass('active');
          $(this).addClass('active');
      }
        else{
          $('.sub-menu').slideUp(100);
          $('.menu-item-has-children').toggleClass('active');
        }
    });
  </code></pre>
  
  <p>The code can be find here on codepen</p>
  
  <p><a href="https://codepen.io/anon/pen/eXQNLo" rel="nofollow noreferrer">https://codepen.io/anon/pen/eXQNLo</a></p>