Q:

jQuery Multi-level/Accordion Side Menu Issue

I'm trying to create a very simple jQuery three-level menu, however for some reason when trying to expand the 'third' level (sub-sub-menu) of the menu, the whole section is toggled, not just the third sub menu.
Here's the jsfiddle: https://jsfiddle.net/xa2dqqyo/
and the markup:
<li class="menu-item"><a href="#">Home</a>
  <ul class="sub-menu">
    <li class="menu-item"><a href="#">Sub Menu Link</a>
      <ul class="sub-sub-menu">
        <li class="menu-item"><a href="#">Third Level</a></li>
      </ul>
    </li>
  </ul>
</li>

You can recreate it by clicking the sub link in the jsfiddle - it does toggle the third level, but it also toggles the whole menu/section.
Am I missing something simple here, or is the juery incorrect? For context, I'm working on a custom wordpress menu.
Thanks for any help!

A:

Here you go with a solution https://jsfiddle.net/xa2dqqyo/1/

$(document).ready(function(){
  $(".menu-item").click(function(e){
    e.preventDefault();
    $(".sub-menu", this).slideToggle(300);
  });

  $(".sub-menu").click(function(e){
    e.stopPropagation();
    $(".sub-sub-menu", this).slideToggle(300);
  });
});
.sub-menu {
  display:none;  
}
.sub-sub-menu {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="menu-item"><a href="#">Home</a>
    <ul  class="sub-menu">
      <li class="menu-item"><a href="#">Sub Menu Link</a>
        <ul  class="sub-sub-menu">
            <li class="menu-item"><a href="#">Third Level</a></li>
        </ul>
      </li>
   </ul>
</li>

You need to add event.stopPropagation(), to stop the event propagation.
Hope this will help you.

