jQuery: do not handle the event "Click" for embedded lists

Question

When I click on the submenu link, this submenu collapses (which is seen before the link opens).

How can I prevent this without adding classes to the submenu? I want to sub-menu expand and collapse only when I click on the parent element.

I tried adding test conditions of child elements and selector but it does not help.

I have this code:

jQuery(document).ready(function() {
  jQuery("#nav > li > ul").hide(); // hide all

  jQuery('ul#nav li').on('click', function() {
    jQuery(this).find('ul').slideToggle("slow");
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
  <li>Parent-1
    <ul>
      <li><a href="#">Link-1</a>
      </li>
      <li><a href="#">Link-2</a>
      </li>
      <li><a href="#">Link-3</a>
      </li>
    </ul>
  </li>
  <li>Parent-2
    <ul>
      <li><a href="#">Link-1</a>
      </li>
      <li><a href="#">Link-2</a>
      </li>
      <li><a href="#">Link-3</a>
      </li>
    </ul>
  </li>
</ul>

I would be very grateful for the help!

Answer 1

Add this to your code: it will prevent the collapse of parent ULs when visitors click menu links:

jQuery('ul#nav li a').on('click', function(e) {
    e.stopPropagation();
});

DEMO: https://jsfiddle.net/s38tygh4/