title: All sub-menus are showing up on click
body: <p>I want to only show the sub-menu that is the child of the clicked li and button when it is clicked. Currently the click and show and hide are working but the code below shows both the sub-menus on click, I want only the child sub-menu of the li button to show on click.</p>
  
  <pre><code>&lt;ul id="menu-main-menu" class="nav-menu"&gt;
      &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Menu link&lt;/a&gt;
      &lt;button aria-expanded="false" class="dropdown-toggle"&gt;&lt;/button&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li class="menu-item"&gt;&lt;a href="link1.htm"&gt;link1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="menu-item"&gt;&lt;a href="link2.htm"&gt;link1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Menu link 2&lt;/a&gt;
      &lt;button aria-expanded="false" class="dropdown-toggle"&gt;&lt;/button&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li class="menu-item"&gt;&lt;a href="link1.htm"&gt;link1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="menu-item"&gt;&lt;a href="link2.htm"&gt;link1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="site-content"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>  jQuery(document).ready(function ($) {
      $("#menu-main-menu").on('click', 'button', function (event) {
          $('ul.sub-menu').appendTo('.site-content');
          if($('ul.sub-menu:visible').length)
            $('ul.sub-menu').hide();
          else
            $('ul.sub-menu').show();
      });
    });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#menu-main-menu ul.sub-menu {
      display: none;
  }
  
  ul.sub-menu {
      display: none;
      position: absolute;
      z-index: 200000;
      top: 0;
      left: 1.5%;
      right: 1.5%;
      margin: 0 auto 0 auto;
      padding: 20px;
      list-style: none;
  }
  ul.sub-menu li {
      width: 24%;
      display: inline-block;
      padding: 8px 9px;
      text-align: center;
  }
  
  ul.sub-menu .toggled-on {
      display: block;
  }
  .site-content {
      display: block;
      position: relative;
  }
  </code></pre>
  
  <p><strong>Solution:</strong> So the solution here was to not use appendTo(), as I had to put the element back where it came from when toggled off. The solution was to merely toggle the menu item using correct position: absolute CSS for the .sub-menu and $()on('click' to toggle it.</p>
  
  <pre><code>   jQuery('#menu-main-menu').on('click', 'button', function(event) {
        if($(this).closest("li.menu-item").children("ul.sub-menu").length &gt; 0)
      {
        $(this).closest("li.menu-item").children("ul.sub-menu").slideToggle('fast');
        return false;
      }
     });
  </code></pre>